lib

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

Prop	Type	Presense	Description
input	String	Required	The input Markdown string to compile.
debounceTimeout	Number	Optional	The number of milliseconds to wait between input changes before recompiling. Defaults to 250.

Scoped Slot Props

Prop	Type	Description
output	String	The spaghettified HTML string.
errors	String[]	Array of Markdown compilation errors.
previewAttrs	Object	Attributes (props) to apply to the NoodlePreview component. Sets the html prop on NoodlePreview.
previewEvents	Object	Event listeners to apply to the NoodlePreview component. Listens to the spaghettified event on NoodlePreview.

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

Prop	Type	Presense	Description
html	String	Required	The compiled HTML string from Noodle.
hidden	Boolean	Optional	When true, hides the preview. Defaults to false.

Events

Event	Description
spaghettified	Emitted when the spaghettified HTML is computed. The handler is called with the spaghettified HTML string.

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