@limetech/lime-elements 37.19.1 → 37.21.0

package/dist/collection/components/text-editor/prosemirror-adapter.js

@@ -0,0 +1,122 @@
+import { h, } from '@stencil/core';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Schema, DOMParser } from 'prosemirror-model';
+import { schema } from 'prosemirror-schema-basic';
+import { addListNodes } from 'prosemirror-schema-list';
+import { exampleSetup } from 'prosemirror-example-setup';
+import { buildFullMenu } from './menu/full-menu';
+import { getFilteredMenu } from './menu/menu-filter';
+/**
+ * The ProseMirror adapter offers a rich text editing experience with markdown support,
+ * in the sense that you can easily type markdown syntax and see the rendered
+ * result as rich text in real-time. For instance, you can type `# Hello, world!`
+ * and see it directly turning to a heading 1 (an `<h1>` HTML element).
+ *
+ * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
+ * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
+ *
+ * @exampleComponent limel-example-prosemirror-adapter-basic
+ * @beta
+ * @private
+ */
+export class ProsemirrorAdapter {
+  constructor() {
+    this.getHTML = () => {
+      if (this.view.dom.textContent === '') {
+        return '';
+      }
+      else {
+        return this.view.dom.innerHTML;
+      }
+    };
+    this.value = undefined;
+    this.view = undefined;
+  }
+  componentWillLoad() { }
+  render() {
+    return h("div", { id: "editor" });
+  }
+  componentDidLoad() {
+    const mySchema = new Schema({
+      nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+      marks: schema.spec.marks,
+    });
+    const menu = buildFullMenu(mySchema)
+      .map((items) => getFilteredMenu(items, undefined))
+      .filter((items) => items.length);
+    this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
+      state: EditorState.create({
+        doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
+        plugins: exampleSetup({
+          schema: mySchema,
+          menuContent: menu,
+        }),
+      }),
+      dispatchTransaction: (transaction) => {
+        const newState = this.view.state.apply(transaction);
+        this.view.updateState(newState);
+        this.change.emit({ html: this.getHTML() });
+      },
+    });
+    if (this.value) {
+      this.view.dom.innerHTML = this.value.html;
+    }
+  }
+  static get is() { return "limel-prosemirror-adapter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["prosemirror-adapter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["prosemirror-adapter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ html: string }",
+          "resolved": "{ html: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the editor"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "view": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when a change is made to the editor"
+        },
+        "complexType": {
+          "original": "{ html: string }",
+          "resolved": "{ html: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=prosemirror-adapter.js.map

package/dist/collection/components/text-editor/prosemirror-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../src/components/text-editor/prosemirror-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,kBAAkB;;IA6DnB,YAAO,GAAG,GAAW,EAAE;MAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAClC,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;OAClC;IACL,CAAC,CAAC;;;;EAhDK,iBAAiB,KAAI,CAAC;EAEtB,MAAM;IACT,OAAO,WAAK,EAAE,EAAC,QAAQ,GAAG,CAAC;EAC/B,CAAC;EAEM,gBAAgB;IACnB,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;MACxB,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,CAAC;MACnE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;KAC3B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAoB,aAAa,CAAC,QAAQ,CAAC;OAChD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;OACjD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErC,IAAI,CAAC,IAAI,GAAG,IAAI,UAAU,CACtB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAC7C;MACI,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;QACtB,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,KAAK,CACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAChD;QACD,OAAO,EAAE,YAAY,CAAC;UAClB,MAAM,EAAE,QAAQ;UAChB,WAAW,EAAE,IAAoB;SACpC,CAAC;OACL,CAAC;MACF,mBAAmB,EAAE,CAAC,WAAW,EAAE,EAAE;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEhC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;MAC/C,CAAC;KACJ,CACJ,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;KAC7C;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Prop,\n    State,\n    h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { MenuElement, MenuItem } from 'prosemirror-menu';\nimport { buildFullMenu } from './menu/full-menu';\nimport { getFilteredMenu } from './menu/menu-filter';\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-prosemirror-adapter',\n    shadow: true,\n    styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n    /**\n     * The value of the editor\n     */\n    @Prop()\n    public value: { html: string };\n\n    @Element()\n    private host: HTMLLimelTextEditorElement;\n\n    @State()\n    private view: EditorView;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    private change: EventEmitter<{ html: string }>;\n\n    public componentWillLoad() {}\n\n    public render() {\n        return <div id=\"editor\" />;\n    }\n\n    public componentDidLoad() {\n        const mySchema = new Schema({\n            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n            marks: schema.spec.marks,\n        });\n\n        const menu: MenuElement[][] = buildFullMenu(mySchema)\n            .map((items) => getFilteredMenu(items, undefined))\n            .filter((items) => items.length);\n\n        this.view = new EditorView(\n            this.host.shadowRoot.querySelector('#editor'),\n            {\n                state: EditorState.create({\n                    doc: DOMParser.fromSchema(mySchema).parse(\n                        this.host.shadowRoot.querySelector('#editor'),\n                    ),\n                    plugins: exampleSetup({\n                        schema: mySchema,\n                        menuContent: menu as MenuItem[][],\n                    }),\n                }),\n                dispatchTransaction: (transaction) => {\n                    const newState = this.view.state.apply(transaction);\n                    this.view.updateState(newState);\n\n                    this.change.emit({ html: this.getHTML() });\n                },\n            },\n        );\n\n        if (this.value) {\n            this.view.dom.innerHTML = this.value.html;\n        }\n    }\n\n    private getHTML = (): string => {\n        if (this.view.dom.textContent === '') {\n            return '';\n        } else {\n            return this.view.dom.innerHTML;\n        }\n    };\n}\n"]}