@lovepop/note-editor

@lovepop/note-editor

A Svelte component for editing the contents of a Lovepop insert

Local development

If you're only working on note-editor, you can run lerna run build to build all sub-packages and then yarn dev in the note-editor directory to start the dev server. This will launch the storybook instance to preview your changes in.

If you cannot connect to the localhost files for colors and fonts, you can replace them in stores.js with the equivalent test fixtures, i.e. ../tests/fixtures/colors.

If you're working on typesetter or svg-writer at the same time, you should open each of those in a terminal and run yarn dev. This is order dependent so do typesetter -> svg-writer -> note-editor

yarn run info for a description of available npm scripts

TDD

For a tdd style workflow, you can run yarn watch:test to have your tests automaticaly update file changes. Run yarn testem to run all the tests in the browser. Note: You may have to run yarn watch:test before each new instance of yarn testem after any changes for the tests to run properly.

Useful links

• Svelte - disapearing framework for generating shareable js components
• Testem - our test runner for this package
• QUnit - our test framework for this package
• Storybook - WIP component playground/dev/doc site

Docs - WIP

yarn run dev will launch a Storybookjs instance with examples of how to consume note-editor

Using Notifications component externally (shopify, admin app, etc...)

  <div id="notifications"></div>

  import { Notifications } from '@lovepop/note-editor';

  const notifications = new Notifications({ target: document.getElementById('notifications') });

  /*
   * adds a notification with type `error`.
   * can be styled with `.ne-error` class
   */
  notifications.error('Some error message', /* optional timeout in ms */);

  /*
   * adds a notification with type `warn`.
   * can be styled with `.ne-warn` class
   */
  notifications.warn('Some warning with optional timeout of 3 seconds', 3000);

  /*
   * adds a notification with type `success`.
   * can be styled with `.ne-success` class
   */
  notifications.success('Some success', /* optional timeout in ms */);


  /*
   * removes all notifications
   */
  notifications.clearAll();

  /* Removes the component from the DOM and removes any
   * event listeners that were created. This will also
   * fire a destroy event e.g. `notifications.on('destory', () => console.log('bye'))`
   */
  notifications.destroy();