@josephuspaye/noodle v0.1.2

Noodle the library

Noodle the library provides a set of Vue components for integrating Noodle into a Vue app.

• See the README for an introduction to Noodle and how it works.
• See https://noodle-editor.netlify.com for an online demo.

Installation

npm install @josephuspaye/noodle --save

Example

This example shows how to use the Noodle and NoodlePreview components to create a basic editor and preview.

<template>
  <div id="app">
    <Noodle
      :input="input"
      v-slot="{ output, errors, previewAttrs, previewEvents }"
    >
      <textarea
        rows="10"
        placeholder="Write some Markdown..."
        v-model="input"
      ></textarea>

      <div
        v-if="errors.length > 0"
        style="backgroun-color: red; color: white; padding: 8px"
      >
        <div :key="index" v-for="(error, index) in errors">{{ error }}</div>
      </div>

      <div style="border: 2px solid gray; padding: 16px">
        <NoodlePreview v-bind="previewAttrs" v-on="previewEvents" />
      </div>
    </Noodle>
  </div>
</template>

<script>
import { Noodle, NoodlePreview } from '@josephuspaye/noodle';

export default {
  name: 'App',

  components: {
    Noodle,
    NoodlePreview,
  },

  data() {
    return {
      input: '# Oh hai',
    };
  },
};
</script>

API

Noodle

The Noodle component is a renderless component that allows you to use a custom UI for the editor and preview. You render the component and use props from the default scoped slot, which can be used to render your editor and preview UI in the slot. See the Example section above for an example.

Props

Scoped Slot Props

NoodlePreview

The NoodlePreview component renders the compiled Markdown and computes the styles required to produce the spaghettified HTML. As a result, it is required when using the Noodle component. If you want a custom preview, you can hide the NoodlePreview component by setting the hidden prop and rendering your own preview using the .

Props

Events

When using NoodlePreview with Noodle, the required props and event listeners should be set using the previewAttrs and previewEvents props from the default scoped slot, like so:

<Noodle :input="input" v-slot="{ previewAttrs, previewEvents }">
  <NoodlePreview v-bind="previewAttrs" v-on="previewEvents" />
</Noodle>

See the Example section above for a complete example.

Licence

MIT