@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/engine/inputrules.ts

@@ -0,0 +1,169 @@
+import {
+  inputRules,
+  wrappingInputRule,
+  textblockTypeInputRule,
+  InputRule,
+} from 'prosemirror-inputrules';
+import { MarkType, Schema } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+
+function escapeRegex(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/** True when the cursor sits in code (block or mark) — no autocorrect there. */
+function isInCodeContext(state: import('prosemirror-state').EditorState): boolean {
+  const { $from } = state.selection;
+  if ($from.parent.type.spec.code) return true;
+  const code = state.schema.marks.code;
+  return !!(code && code.isInSet(state.storedMarks || $from.marks()));
+}
+
+/**
+ * String-replacement rule (the library stringHandler plus a code-context
+ * guard): when the regex has a capture group, only the group is replaced and
+ * the surrounding matched text is preserved.
+ */
+function replaceRule(regexp: RegExp, replacement: string): InputRule {
+  return new InputRule(regexp, (state, match, start, end) => {
+    if (isInCodeContext(state)) return null;
+    let insert = replacement;
+    let from = start;
+    if (match.length > 1 && match[1] !== undefined) {
+      const offset = match[0].lastIndexOf(match[1]);
+      insert += match[0].slice(offset + match[1].length);
+      from += offset;
+      const cutOff = from - end;
+      if (cutOff > 0) {
+        insert = match[0].slice(offset - cutOff, offset) + insert;
+        from = end;
+      }
+    }
+    return state.tr.insertText(insert, from, end);
+  });
+}
+
+/**
+ * CKEditor-style text transformations: symbols, fractions, dashes, ellipsis
+ * and smart quotes. All skipped inside code and revertable with Backspace.
+ */
+function textTransformRules(): InputRule[] {
+  return [
+    // Symbols.
+    replaceRule(/\(c\)$/i, '©'),
+    replaceRule(/\(r\)$/i, '®'),
+    replaceRule(/\(tm\)$/i, '™'),
+    // Fractions (word-bounded, completed by a space).
+    replaceRule(/(?:^|\s)(1\/2)\s$/, '½'),
+    replaceRule(/(?:^|\s)(1\/4)\s$/, '¼'),
+    replaceRule(/(?:^|\s)(3\/4)\s$/, '¾'),
+    // Dashes: " --- " → em, " -- " → en. The em rule can't be shadowed by
+    // the en rule because the en rule requires whitespace before "--".
+    replaceRule(/\s(---)\s$/, '—'),
+    replaceRule(/\s(--)\s$/, '–'),
+    // Ellipsis.
+    replaceRule(/\.\.\.$/, '…'),
+    // Smart quotes: opening after start/space/bracket, closing elsewhere.
+    replaceRule(/(?:^|[\s{[(<'"‘“])(")$/, '“'),
+    replaceRule(/"$/, '”'),
+    replaceRule(/(?:^|[\s{[(<'"‘“])(')$/, '‘'),
+    replaceRule(/'$/, '’'),
+  ];
+}
+
+export interface InputRulesOptions {
+  /** Include the autocorrect/typography rules. Defaults to true. */
+  textTransform?: boolean;
+}
+
+/**
+ * Markdown mark shortcut: typing `<delim>text<delim>` applies the mark and
+ * strips the delimiters. The matched range (delimiters and all) is replaced
+ * with the marked content, so the final typed delimiter never lands.
+ */
+function markInputRule(delim: string, markType: MarkType): InputRule {
+  const escaped = escapeRegex(delim);
+  const inner = escapeRegex(delim[0]);
+  const regexp = new RegExp(
+    `(?:^|\\s)${escaped}([^${inner}\\s](?:[^${inner}]*[^${inner}\\s])?)${escaped}$`
+  );
+  return new InputRule(regexp, (state, match, start, end) => {
+    const content = match[1];
+    const delimStart = start + match[0].indexOf(delim);
+    const tr = state.tr;
+    tr.delete(delimStart, end);
+    tr.insertText(content, delimStart);
+    tr.addMark(delimStart, delimStart + content.length, markType.create());
+    tr.removeStoredMark(markType);
+    return tr;
+  });
+}
+
+/**
+ * Autolink: typing a space after a bare URL (`https://…`, `http://…` or
+ * `www.…`) converts it into a link. Trailing punctuation stays outside the
+ * link, code spans and existing links are left alone, and Backspace
+ * (undoInputRule) reverts the conversion like any other input rule.
+ */
+function linkifyRule(schema: Schema): InputRule {
+  const linkType = schema.marks.link;
+  const regexp = /(?:^|\s)((?:https?:\/\/|www\.)[^\s]*[^\s.,:;!?'")\]}])\s$/i;
+  return new InputRule(regexp, (state, match, start, end) => {
+    const url = match[1];
+    const urlStart = start + match[0].indexOf(url);
+    const urlEnd = urlStart + url.length;
+    if (state.doc.rangeHasMark(urlStart, urlEnd, linkType)) return null;
+    if (state.doc.rangeHasMark(urlStart, urlEnd, schema.marks.code)) return null;
+    const href = /^www\./i.test(url) ? `https://${url}` : url;
+    const tr = state.tr;
+    tr.addMark(urlStart, urlEnd, linkType.create({ href }));
+    tr.removeStoredMark(linkType);
+    tr.insertText(' ', end);
+    return tr;
+  });
+}
+
+/**
+ * Markdown-style typing shortcuts: block rules plus inline mark rules
+ * (**bold**, *italic*, `code`, ~~strike~~), and (unless disabled) the
+ * typography autocorrect rules.
+ */
+export function buildInputRules(schema: Schema, options: InputRulesOptions = {}): Plugin {
+  const transforms = options.textTransform === false ? [] : textTransformRules();
+  return inputRules({
+    rules: [
+      ...transforms,
+      // "# " … "###### " → heading
+      textblockTypeInputRule(
+        new RegExp('^(#{1,6})\\s$'),
+        schema.nodes.heading,
+        match => ({ level: match[1].length })
+      ),
+      // "> " → blockquote
+      wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote),
+      // "- " or "* " → bullet list
+      wrappingInputRule(/^\s*([-*])\s$/, schema.nodes.bullet_list),
+      // "1. " → ordered list
+      wrappingInputRule(
+        /^(\d+)\.\s$/,
+        schema.nodes.ordered_list,
+        match => ({ order: +match[1] }),
+        (match, node) => node.childCount + node.attrs.order === +match[1]
+      ),
+      // "```" → code block
+      textblockTypeInputRule(/^```$/, schema.nodes.code_block),
+      // "[] " or "[ ] " → checklist
+      wrappingInputRule(/^\s*\[[ ]?\]\s$/, schema.nodes.task_list),
+      // Inline marks. Bold before italic so '**' is never read as italic;
+      // strike (~~) before subscript (~) so a double tilde is never a single.
+      markInputRule('**', schema.marks.bold),
+      markInputRule('*', schema.marks.italic),
+      markInputRule('~~', schema.marks.strike),
+      markInputRule('~', schema.marks.subscript),
+      markInputRule('^', schema.marks.superscript),
+      markInputRule('`', schema.marks.code),
+      // Bare URL + space → link.
+      linkifyRule(schema),
+    ],
+  });
+}

package/src/nile-wysiwyg-editor/engine/keymap.ts

@@ -0,0 +1,146 @@
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap, chainCommands, exitCode } from 'prosemirror-commands';
+import { undo, redo } from 'prosemirror-history';
+import { undoInputRule } from 'prosemirror-inputrules';
+import {
+  splitListItem,
+  liftListItem,
+  sinkListItem,
+} from 'prosemirror-schema-list';
+import { Command, Plugin } from 'prosemirror-state';
+import { Schema } from 'prosemirror-model';
+import { getCommand } from './commands';
+import { plainTextSlice } from './plugins/paste';
+
+const isMac =
+  typeof navigator !== 'undefined' && /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+
+export interface KeymapOptions {
+  /** Invoked on Mod-k so the host can open its link editor UI. */
+  onLinkShortcut?: () => void;
+  /** Invoked on Mod-f so the host can open its find & replace bar. */
+  onFindShortcut?: () => void;
+  /** Invoked on Mod-/ so the host can open its shortcut help dialog. */
+  onShortcutHelp?: () => void;
+}
+
+/**
+ * Editor keymap. Returned as two plugins: feature bindings first, then the
+ * ProseMirror base keymap as fallback.
+ */
+export function buildKeymapPlugins(schema: Schema, options: KeymapOptions = {}): Plugin[] {
+  const keys: Record<string, Command> = {};
+
+  keys['Mod-z'] = undo;
+  keys['Shift-Mod-z'] = redo;
+  if (!isMac) keys['Mod-y'] = redo;
+  keys['Backspace'] = undoInputRule;
+
+  keys['Mod-b'] = (state, dispatch, view) =>
+    getCommand(state, 'bold')!(state, dispatch, view);
+  keys['Mod-i'] = (state, dispatch, view) =>
+    getCommand(state, 'italic')!(state, dispatch, view);
+  keys['Mod-u'] = (state, dispatch, view) =>
+    getCommand(state, 'underline')!(state, dispatch, view);
+  keys['Shift-Mod-x'] = (state, dispatch, view) =>
+    getCommand(state, 'strike')!(state, dispatch, view);
+  // Google Docs convention: Ctrl+, subscript, Ctrl+. superscript.
+  keys['Mod-,'] = (state, dispatch, view) =>
+    getCommand(state, 'subscript')!(state, dispatch, view);
+  keys['Mod-.'] = (state, dispatch, view) =>
+    getCommand(state, 'superscript')!(state, dispatch, view);
+
+  // Paste without formatting. Reads the clipboard directly so the result is
+  // plain text regardless of the persistent toggle; falls back to the
+  // browser default when the async Clipboard API is unavailable.
+  keys['Shift-Mod-v'] = (_state, _dispatch, view) => {
+    if (!view || typeof navigator === 'undefined' || !navigator.clipboard?.readText) {
+      return false;
+    }
+    navigator.clipboard
+      .readText()
+      .then(text => {
+        if (!text || !view) return;
+        const slice = plainTextSlice(view.state.schema, text);
+        view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+      })
+      .catch(() => {
+        /* clipboard denied — silently no-op */
+      });
+    return true;
+  };
+
+  keys['Shift-Ctrl-0'] = (state, dispatch, view) =>
+    getCommand(state, 'paragraph')!(state, dispatch, view);
+  for (let level = 1; level <= 6; level += 1) {
+    keys[`Shift-Ctrl-${level}`] = (state, dispatch, view) =>
+      getCommand(state, 'heading', { level })!(state, dispatch, view);
+  }
+
+  keys['Shift-Mod-7'] = (state, dispatch, view) =>
+    getCommand(state, 'orderedList')!(state, dispatch, view);
+  keys['Shift-Mod-8'] = (state, dispatch, view) =>
+    getCommand(state, 'bulletList')!(state, dispatch, view);
+  keys['Shift-Mod-9'] = (state, dispatch, view) =>
+    getCommand(state, 'blockquote')!(state, dispatch, view);
+  keys['Mod-Alt-c'] = (state, dispatch, view) =>
+    getCommand(state, 'codeBlock')!(state, dispatch, view);
+
+  // Google Docs convention: Mod-] / Mod-[ indent and outdent.
+  keys['Mod-]'] = (state, dispatch, view) =>
+    getCommand(state, 'indent')!(state, dispatch, view);
+  keys['Mod-['] = (state, dispatch, view) =>
+    getCommand(state, 'outdent')!(state, dispatch, view);
+
+  // New task items always start unchecked.
+  keys['Enter'] = chainCommands(
+    splitListItem(schema.nodes.task_item, { checked: false }),
+    splitListItem(schema.nodes.list_item)
+  );
+  keys['Tab'] = chainCommands(
+    sinkListItem(schema.nodes.task_item),
+    sinkListItem(schema.nodes.list_item)
+  );
+  keys['Shift-Tab'] = chainCommands(
+    liftListItem(schema.nodes.task_item),
+    liftListItem(schema.nodes.list_item)
+  );
+
+  // Hard break; exitCode first so breaks escape code marks cleanly.
+  const br: Command = chainCommands(exitCode, (state, dispatch) => {
+    if (dispatch) {
+      dispatch(
+        state.tr.replaceSelectionWith(schema.nodes.hard_break.create()).scrollIntoView()
+      );
+    }
+    return true;
+  });
+  keys['Shift-Enter'] = br;
+  keys['Mod-Enter'] = br;
+
+  if (options.onLinkShortcut) {
+    const open = options.onLinkShortcut;
+    keys['Mod-k'] = () => {
+      open();
+      return true;
+    };
+  }
+
+  if (options.onFindShortcut) {
+    const openFind = options.onFindShortcut;
+    keys['Mod-f'] = () => {
+      openFind();
+      return true;
+    };
+  }
+
+  if (options.onShortcutHelp) {
+    const openHelp = options.onShortcutHelp;
+    keys['Mod-/'] = () => {
+      openHelp();
+      return true;
+    };
+  }
+
+  return [keymap(keys), keymap(baseKeymap)];
+}

package/src/nile-wysiwyg-editor/engine/markdown-parse.test.ts

@@ -0,0 +1,148 @@
+import { expect } from '@open-wc/testing';
+import { markdownToHtml, looksLikeMarkdown, inlineToHtml } from './markdown-parse';
+import { defaultSchema, htmlToDoc, docToMarkdown } from './index';
+
+describe('markdown-parse', () => {
+  describe('markdownToHtml — blocks', () => {
+    it('parses headings', () => {
+      expect(markdownToHtml('# One')).to.equal('<h1>One</h1>');
+      expect(markdownToHtml('### Three')).to.equal('<h3>Three</h3>');
+      expect(markdownToHtml('## Trailing ##')).to.equal('<h2>Trailing</h2>');
+    });
+
+    it('parses paragraphs and hard breaks', () => {
+      expect(markdownToHtml('one\ntwo\n\nthree')).to.equal(
+        '<p>one<br>two</p><p>three</p>'
+      );
+    });
+
+    it('parses blockquotes with lazy continuation', () => {
+      expect(markdownToHtml('> quoted\ncontinues')).to.equal(
+        '<blockquote><p>quoted<br>continues</p></blockquote>'
+      );
+    });
+
+    it('parses fenced code blocks with language', () => {
+      expect(markdownToHtml('```js\nconst a = 1 < 2;\n```')).to.equal(
+        '<pre data-language="js"><code>const a = 1 &lt; 2;</code></pre>'
+      );
+    });
+
+    it('keeps markdown syntax literal inside code fences', () => {
+      expect(markdownToHtml('```\n# not a heading\n**not bold**\n```')).to.equal(
+        '<pre><code># not a heading\n**not bold**</code></pre>'
+      );
+    });
+
+    it('parses horizontal rules but not list dashes', () => {
+      expect(markdownToHtml('---')).to.equal('<hr>');
+      expect(markdownToHtml('- item')).to.equal('<ul><li><p>item</p></li></ul>');
+    });
+
+    it('parses nested bullet lists', () => {
+      expect(markdownToHtml('- a\n  - b')).to.equal(
+        '<ul><li><p>a</p><ul><li><p>b</p></li></ul></li></ul>'
+      );
+    });
+
+    it('parses ordered lists with a start offset', () => {
+      expect(markdownToHtml('3. three\n4. four')).to.equal(
+        '<ol start="3"><li><p>three</p></li><li><p>four</p></li></ol>'
+      );
+    });
+
+    it('splits sibling lists when the marker type changes', () => {
+      expect(markdownToHtml('- a\n1. b')).to.equal(
+        '<ul><li><p>a</p></li></ul><ol><li><p>b</p></li></ol>'
+      );
+    });
+
+    it('parses task lists without converting plain neighbours', () => {
+      expect(markdownToHtml('- plain\n- [x] done')).to.equal(
+        '<ul><li><p>plain</p></li></ul>' +
+          '<ul data-task-list="true"><li data-task-item="true" data-checked="true"><p>done</p></li></ul>'
+      );
+    });
+
+    it('parses GFM tables with header cells', () => {
+      expect(markdownToHtml('| A | B |\n| - | - |\n| 1 | 2 |')).to.equal(
+        '<table><tr><th><p>A</p></th><th><p>B</p></th></tr>' +
+          '<tr><td><p>1</p></td><td><p>2</p></td></tr></table>'
+      );
+    });
+  });
+
+  describe('inlineToHtml — marks', () => {
+    it('converts the inline marks', () => {
+      expect(inlineToHtml('**b** *i* ~~s~~ `c`')).to.equal(
+        '<strong>b</strong> <em>i</em> <s>s</s> <code>c</code>'
+      );
+    });
+
+    it('converts links and images', () => {
+      expect(inlineToHtml('[x](https://a.b)')).to.equal('<a href="https://a.b">x</a>');
+      expect(inlineToHtml('![y](https://a.b/i.png)')).to.equal(
+        '<img src="https://a.b/i.png" alt="y">'
+      );
+    });
+
+    it('escapes HTML in text and keeps code spans literal', () => {
+      expect(inlineToHtml('<b>hi</b>')).to.equal('&lt;b&gt;hi&lt;/b&gt;');
+      expect(inlineToHtml('`*literal*`')).to.equal('<code>*literal*</code>');
+    });
+
+    it('honors backslash escapes', () => {
+      expect(inlineToHtml('\\*not italic\\*')).to.equal('*not italic*');
+    });
+
+    it('does not read mid-word underscores as emphasis', () => {
+      expect(inlineToHtml('snake_case_name')).to.equal('snake_case_name');
+    });
+  });
+
+  describe('round-trip with docToMarkdown', () => {
+    it('survives a structural round-trip', () => {
+      const source = [
+        '# Title',
+        '',
+        'Some **bold** and *italic* text.',
+        '',
+        '- one',
+        '- two',
+        '',
+        '```js',
+        'const x = 1;',
+        '```',
+      ].join('\n');
+      const doc = htmlToDoc(defaultSchema, markdownToHtml(source));
+      expect(docToMarkdown(doc).trim()).to.equal(source);
+    });
+
+    it('round-trips task lists', () => {
+      const source = '- [ ] todo\n- [x] done';
+      const doc = htmlToDoc(defaultSchema, markdownToHtml(source));
+      expect(docToMarkdown(doc).trim()).to.equal(source);
+    });
+  });
+
+  describe('looksLikeMarkdown', () => {
+    it('detects block constructs', () => {
+      expect(looksLikeMarkdown('# Heading')).to.be.true;
+      expect(looksLikeMarkdown('- a list item')).to.be.true;
+      expect(looksLikeMarkdown('1. ordered')).to.be.true;
+      expect(looksLikeMarkdown('> quote')).to.be.true;
+      expect(looksLikeMarkdown('```\ncode\n```')).to.be.true;
+    });
+
+    it('detects unambiguous inline constructs', () => {
+      expect(looksLikeMarkdown('some **bold** text')).to.be.true;
+      expect(looksLikeMarkdown('a [link](https://x.y) here')).to.be.true;
+    });
+
+    it('rejects plain text and HTML', () => {
+      expect(looksLikeMarkdown('just a sentence.')).to.be.false;
+      expect(looksLikeMarkdown('2 * 3 = 6 and 4 - 2 = 2')).to.be.false;
+      expect(looksLikeMarkdown('<p>markup</p>')).to.be.false;
+    });
+  });
+});