xt-plugin-editor 1.0.0 → 1.3.1

package/fesm2022/xt-plugin-editor.mjs

@@ -0,0 +1,770 @@
+import * as i0 from '@angular/core';
+import { SecurityContext, Pipe, input, inject, viewChild, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { XtSimpleComponent, XtResolverService, updateFormGroupWithValue, XtRenderComponent } from 'xt-components';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NodeSelection, EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { schema, defaultMarkdownSerializer, defaultMarkdownParser } from 'prosemirror-markdown';
+import { MenuItem, icons, wrapItem, blockTypeItem, Dropdown, DropdownSubmenu, joinUpItem, liftItem, selectParentNodeItem, undoItem, redoItem, menuBar } from 'prosemirror-menu';
+import { joinUp, joinDown, lift, selectParentNode, toggleMark, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
+import { wrapInList, splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list';
+import { undo, redo, history } from 'prosemirror-history';
+import { undoInputRule, wrappingInputRule, textblockTypeInputRule, smartQuotes, ellipsis, emDash, inputRules } from 'prosemirror-inputrules';
+import { keymap } from 'prosemirror-keymap';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { gapCursor } from 'prosemirror-gapcursor';
+import { marked } from 'marked';
+import * as i1 from '@angular/platform-browser';
+import { Tooltip } from 'primeng/tooltip';
+import { Dialog } from 'primeng/dialog';
+import { ButtonDirective } from 'primeng/button';
+
+/// Given a blockquote node type, returns an input rule that turns `"> "`
+/// at the start of a textblock into a blockquote.
+const prefix = "ProseMirror-prompt";
+const mac = typeof navigator != "undefined" ? /Mac|iP(hone|[oa]d)/.test(navigator.platform) : false;
+/// Inspect the given schema looking for marks and nodes from the
+/// basic schema, and if found, add key bindings related to them.
+/// This will add:
+///
+/// * **Mod-b** for toggling [strong](#schema-basic.StrongMark)
+/// * **Mod-i** for toggling [emphasis](#schema-basic.EmMark)
+/// * **Mod-`** for toggling [code font](#schema-basic.CodeMark)
+/// * **Ctrl-Shift-0** for making the current textblock a paragraph
+/// * **Ctrl-Shift-1** to **Ctrl-Shift-Digit6** for making the current
+///   textblock a heading of the corresponding level
+/// * **Ctrl-Shift-Backslash** to make the current textblock a code block
+/// * **Ctrl-Shift-8** to wrap the selection in an ordered list
+/// * **Ctrl-Shift-9** to wrap the selection in a bullet list
+/// * **Ctrl->** to wrap the selection in a block quote
+/// * **Enter** to split a non-empty textblock in a list item while at
+///   the same time splitting the list item
+/// * **Mod-Enter** to insert a hard break
+/// * **Mod-_** to insert a horizontal rule
+/// * **Backspace** to undo an input rule
+/// * **Alt-ArrowUp** to `joinUp`
+/// * **Alt-ArrowDown** to `joinDown`
+/// * **Mod-BracketLeft** to `lift`
+/// * **Escape** to `selectParentNode`
+///
+/// You can suppress or map these bindings by passing a `mapKeys`
+/// argument, which maps key names (say `"Mod-B"` to either `false`, to
+/// remove the binding, or a new key name string.
+function buildKeymap(schema, mapKeys) {
+    let keys = {}, type;
+    function bind(key, cmd) {
+        if (mapKeys) {
+            let mapped = mapKeys[key];
+            if (mapped === false)
+                return;
+            if (mapped)
+                key = mapped;
+        }
+        keys[key] = cmd;
+    }
+    bind("Mod-z", undo);
+    bind("Shift-Mod-z", redo);
+    bind("Backspace", undoInputRule);
+    if (!mac)
+        bind("Mod-y", redo);
+    bind("Alt-ArrowUp", joinUp);
+    bind("Alt-ArrowDown", joinDown);
+    bind("Mod-BracketLeft", lift);
+    bind("Escape", selectParentNode);
+    if (type = schema.marks["strong"]) {
+        bind("Mod-b", toggleMark(type));
+        bind("Mod-B", toggleMark(type));
+    }
+    if (type = schema.marks["em"]) {
+        bind("Mod-i", toggleMark(type));
+        bind("Mod-I", toggleMark(type));
+    }
+    if (type = schema.marks["code"])
+        bind("Mod-`", toggleMark(type));
+    if (type = schema.nodes["bullet_list"])
+        bind("Shift-Ctrl-8", wrapInList(type));
+    if (type = schema.nodes["ordered_list"])
+        bind("Shift-Ctrl-9", wrapInList(type));
+    if (type = schema.nodes["blockquote"])
+        bind("Ctrl->", wrapIn(type));
+    if (type = schema.nodes["hard_break"]) {
+        let br = type, cmd = chainCommands(exitCode, (state, dispatch) => {
+            if (dispatch)
+                dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+            return true;
+        });
+        bind("Mod-Enter", cmd);
+        bind("Shift-Enter", cmd);
+        if (mac)
+            bind("Ctrl-Enter", cmd);
+    }
+    if (type = schema.nodes["list_item"]) {
+        bind("Enter", splitListItem(type));
+        bind("Mod-[", liftListItem(type));
+        bind("Mod-]", sinkListItem(type));
+    }
+    if (type = schema.nodes["paragraph"])
+        bind("Shift-Ctrl-0", setBlockType(type));
+    if (type = schema.nodes["code_block"])
+        bind("Shift-Ctrl-\\", setBlockType(type));
+    if (type = schema.nodes["heading"])
+        for (let i = 1; i <= 6; i++)
+            bind("Shift-Ctrl-" + i, setBlockType(type, { level: i }));
+    if (type = schema.nodes["horizontal_rule"]) {
+        let hr = type;
+        bind("Mod-_", (state, dispatch) => {
+            if (dispatch)
+                dispatch(state.tr.replaceSelectionWith(hr.create()).scrollIntoView());
+            return true;
+        });
+    }
+    return keys;
+}
+function openPrompt(options) {
+    let wrapper = document.body.appendChild(document.createElement("div"));
+    wrapper.className = prefix;
+    let mouseOutside = (e) => { if (!wrapper.contains(e.target))
+        close(); };
+    setTimeout(() => window.addEventListener("mousedown", mouseOutside), 50);
+    let close = () => {
+        window.removeEventListener("mousedown", mouseOutside);
+        if (wrapper.parentNode)
+            wrapper.parentNode.removeChild(wrapper);
+    };
+    let domFields = [];
+    for (let name in options.fields)
+        domFields.push(options.fields[name].render());
+    let submitButton = document.createElement("button");
+    submitButton.type = "submit";
+    submitButton.className = prefix + "-submit";
+    submitButton.textContent = "OK";
+    let cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.className = prefix + "-cancel";
+    cancelButton.textContent = "Cancel";
+    cancelButton.addEventListener("click", close);
+    let form = wrapper.appendChild(document.createElement("form"));
+    if (options.title)
+        form.appendChild(document.createElement("h5")).textContent = options.title;
+    domFields.forEach(field => {
+        form.appendChild(document.createElement("div")).appendChild(field);
+    });
+    let buttons = form.appendChild(document.createElement("div"));
+    buttons.className = prefix + "-buttons";
+    buttons.appendChild(submitButton);
+    buttons.appendChild(document.createTextNode(" "));
+    buttons.appendChild(cancelButton);
+    let box = wrapper.getBoundingClientRect();
+    wrapper.style.top = ((window.innerHeight - box.height) / 2) + "px";
+    wrapper.style.left = ((window.innerWidth - box.width) / 2) + "px";
+    let submit = () => {
+        let params = getValues(options.fields, domFields);
+        if (params) {
+            close();
+            options.callback(params);
+        }
+    };
+    form.addEventListener("submit", e => {
+        e.preventDefault();
+        submit();
+    });
+    form.addEventListener("keydown", e => {
+        if (e.keyCode == 27) {
+            e.preventDefault();
+            close();
+        }
+        else if (e.keyCode == 13 && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+            e.preventDefault();
+            submit();
+        }
+        else if (e.keyCode == 9) {
+            window.setTimeout(() => {
+                if (!wrapper.contains(document.activeElement))
+                    close();
+            }, 500);
+        }
+    });
+    let input = form.elements[0];
+    if (input)
+        input.focus();
+}
+function getValues(fields, domFields) {
+    let result = Object.create(null), i = 0;
+    for (let name in fields) {
+        let field = fields[name], dom = domFields[i++];
+        let value = field.read(dom), bad = field.validate(value);
+        if (bad) {
+            reportInvalid(dom, bad);
+            return null;
+        }
+        result[name] = field.clean(value);
+    }
+    return result;
+}
+function reportInvalid(dom, message) {
+    // FIXME this is awful and needs a lot more work
+    let parent = dom.parentNode;
+    let msg = parent.appendChild(document.createElement("div"));
+    msg.style.left = (dom.offsetLeft + dom.offsetWidth + 2) + "px";
+    msg.style.top = (dom.offsetTop - 5) + "px";
+    msg.className = "ProseMirror-invalid";
+    msg.textContent = message;
+    setTimeout(() => parent.removeChild(msg), 1500);
+}
+/// The type of field that `openPrompt` expects to be passed to it.
+class Field {
+    /// Create a field with the given options. Options support by all
+    /// field types are:
+    constructor(
+    /// @internal
+    options) {
+        this.options = options;
+    }
+    /// Read the field's value from its DOM node.
+    read(dom) { return dom.value; }
+    /// A field-type-specific validation function.
+    validateType(value) { return null; }
+    /// @internal
+    validate(value) {
+        if (!value && this.options.required)
+            return "Required field";
+        return this.validateType(value) || (this.options.validate ? this.options.validate(value) : null);
+    }
+    clean(value) {
+        return this.options.clean ? this.options.clean(value) : value;
+    }
+}
+/// A field class for single-line text fields.
+class TextField extends Field {
+    render() {
+        let input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = this.options.label;
+        input.value = this.options.value || "";
+        input.autocomplete = "off";
+        return input;
+    }
+}
+/// A field class for dropdown fields based on a plain `<select>`
+/// tag. Expects an option `options`, which should be an array of
+/// `{value: string, label: string}` objects, or a function taking a
+/// `ProseMirror` instance and returning such an array.
+class SelectField extends Field {
+    render() {
+        let select = document.createElement("select");
+        this.options.options.forEach(o => {
+            let opt = select.appendChild(document.createElement("option"));
+            opt.value = o.value;
+            opt.selected = o.value == this.options.value;
+            opt.label = o.label;
+        });
+        return select;
+    }
+}
+// Helpers to create specific types of items
+function canInsert(state, nodeType) {
+    let $from = state.selection.$from;
+    for (let d = $from.depth; d >= 0; d--) {
+        let index = $from.index(d);
+        if ($from.node(d).canReplaceWith(index, index, nodeType))
+            return true;
+    }
+    return false;
+}
+function insertImageItem(nodeType) {
+    return new MenuItem({
+        title: "Insert image",
+        label: "Image",
+        enable(state) { return canInsert(state, nodeType); },
+        run(state, _, view) {
+            let { from, to } = state.selection, attrs = null;
+            if (state.selection instanceof NodeSelection && state.selection.node.type == nodeType)
+                attrs = state.selection.node.attrs;
+            openPrompt({
+                title: "Insert image",
+                fields: {
+                    src: new TextField({ label: "Location", required: true, value: attrs && attrs["src"] }),
+                    title: new TextField({ label: "Title", value: attrs && attrs["title"] }),
+                    alt: new TextField({ label: "Description",
+                        value: attrs ? attrs["alt"] : state.doc.textBetween(from, to, " ") })
+                },
+                callback(attrs) {
+                    view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)));
+                    view.focus();
+                }
+            });
+        }
+    });
+}
+function cmdItem(cmd, options) {
+    let passedOptions = {
+        label: options.title,
+        run: cmd
+    };
+    for (let prop in options)
+        passedOptions[prop] = options[prop];
+    if (!options.enable && !options.select)
+        passedOptions[options.enable ? "enable" : "select"] = state => cmd(state);
+    return new MenuItem(passedOptions);
+}
+function markActive(state, type) {
+    let { from, $from, to, empty } = state.selection;
+    if (empty)
+        return !!type.isInSet(state.storedMarks || $from.marks());
+    else
+        return state.doc.rangeHasMark(from, to, type);
+}
+function markItem(markType, options) {
+    let passedOptions = {
+        active(state) { return markActive(state, markType); }
+    };
+    for (let prop in options)
+        passedOptions[prop] = options[prop];
+    return cmdItem(toggleMark(markType), passedOptions);
+}
+function linkItem(markType) {
+    return new MenuItem({
+        title: "Add or remove link",
+        icon: icons["link"],
+        active(state) { return markActive(state, markType); },
+        enable(state) { return !state.selection.empty; },
+        run(state, dispatch, view) {
+            if (markActive(state, markType)) {
+                toggleMark(markType)(state, dispatch);
+                return true;
+            }
+            openPrompt({
+                title: "Create a link",
+                fields: {
+                    href: new TextField({
+                        label: "Link target",
+                        required: true
+                    }),
+                    title: new TextField({ label: "Title" })
+                },
+                callback(attrs) {
+                    toggleMark(markType, attrs)(view.state, view.dispatch);
+                    view.focus();
+                }
+            });
+            return true;
+        }
+    });
+}
+function wrapListItem(nodeType, options) {
+    return cmdItem(wrapInList(nodeType, options.attrs), options);
+}
+/// Given a schema, look for default mark and node types in it and
+/// return an object with relevant menu items relating to those marks.
+function buildMenuItems(schema, override) {
+    let r = {};
+    let mark;
+    override = override || {};
+    if (mark = schema.marks["strong"])
+        r.toggleStrong = override["strong"] || markItem(mark, { title: "Toggle strong style", icon: icons["strong"] });
+    if (mark = schema.marks["em"])
+        r.toggleEm = override["em"] || markItem(mark, { title: "Toggle emphasis", icon: icons["em"] });
+    if (mark = schema.marks["code"])
+        r.toggleCode = override["code"] || markItem(mark, { title: "Toggle code font", icon: icons["code"] });
+    if (mark = schema.marks["link"])
+        r.toggleLink = override["link"] || linkItem(mark);
+    let node;
+    if (node = schema.nodes["image"])
+        r.insertImage = override["image"] || insertImageItem(node);
+    if (node = schema.nodes["bullet_list"])
+        r.wrapBulletList = override["bullet_list"] || wrapListItem(node, {
+            title: "Wrap in bullet list",
+            icon: icons["bulletList"]
+        });
+    if (node = schema.nodes["ordered_list"])
+        r.wrapOrderedList = override["ordered_list"] || wrapListItem(node, {
+            title: "Wrap in ordered list",
+            icon: icons["orderedList"]
+        });
+    if (node = schema.nodes["blockquote"])
+        r.wrapBlockQuote = override["blockquote"] || wrapItem(node, {
+            title: "Wrap in block quote",
+            icon: icons["blockquote"]
+        });
+    if (node = schema.nodes["paragraph"])
+        r.makeParagraph = override["paragraph"] || blockTypeItem(node, {
+            title: "Change to paragraph",
+            label: "Plain"
+        });
+    if (node = schema.nodes["code_block"])
+        r.makeCodeBlock = override["code_block"] || blockTypeItem(node, {
+            title: "Change to code block",
+            label: "Code"
+        });
+    if (node = schema.nodes["heading"])
+        for (let i = 1; i <= 10; i++)
+            r["makeHead" + i] = override["makeHead" + i] || blockTypeItem(node, {
+                title: "Change to heading " + i,
+                label: "Level " + i,
+                attrs: { level: i }
+            });
+    if (node = schema.nodes["horizontal_rule"]) {
+        let hr = node;
+        r.insertHorizontalRule = override["horizontal_rule"] || new MenuItem({
+            title: "Insert horizontal rule",
+            label: "Horizontal rule",
+            enable(state) { return canInsert(state, hr); },
+            run(state, dispatch) { dispatch(state.tr.replaceSelectionWith(hr.create())); }
+        });
+    }
+    let cut = (arr) => arr.filter(x => x);
+    r.insertMenu = new Dropdown(cut([r.insertImage, r.insertHorizontalRule]), { label: "Insert" });
+    r.typeMenu = new Dropdown(cut([r.makeParagraph, r.makeCodeBlock, r.makeHead1 && new DropdownSubmenu(cut([
+            r.makeHead1, r.makeHead2, r.makeHead3, r.makeHead4, r.makeHead5, r.makeHead6
+        ]), { label: "Heading" })]), { label: "Type..." });
+    r.inlineMenu = [cut([r.toggleStrong, r.toggleEm, r.toggleCode, r.toggleLink])];
+    r.blockMenu = [cut([r.wrapBulletList, r.wrapOrderedList, r.wrapBlockQuote, joinUpItem,
+            liftItem, selectParentNodeItem])];
+    r.fullMenu = r.inlineMenu.concat([[r.insertMenu, r.typeMenu]], [[undoItem, redoItem]], r.blockMenu);
+    return r;
+}
+function blockQuoteRule(nodeType) {
+    return wrappingInputRule(/^\s*>\s$/, nodeType);
+}
+/// Given a list node type, returns an input rule that turns a number
+/// followed by a dot at the start of a textblock into an ordered list.
+function orderedListRule(nodeType) {
+    return wrappingInputRule(/^(\d+)\.\s$/, nodeType, match => ({ order: +match[1] }), (match, node) => node.childCount + node.attrs["order"] == +match[1]);
+}
+/// Given a list node type, returns an input rule that turns a bullet
+/// (dash, plush, or asterisk) at the start of a textblock into a
+/// bullet list.
+function bulletListRule(nodeType) {
+    return wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
+}
+/// Given a code block node type, returns an input rule that turns a
+/// textblock starting with three backticks into a code block.
+function codeBlockRule(nodeType) {
+    return textblockTypeInputRule(/^```$/, nodeType);
+}
+/// Given a node type and a maximum level, creates an input rule that
+/// turns up to that number of `#` characters followed by a space at
+/// the start of a textblock into a heading whose level corresponds to
+/// the number of `#` signs.
+function headingRule(nodeType, maxLevel) {
+    return textblockTypeInputRule(new RegExp("^(#{1," + maxLevel + "})\\s$"), nodeType, match => ({ level: match[1].length }));
+}
+/// A set of input rules for creating the basic block quotes, lists,
+/// code blocks, and heading.
+function buildInputRules(schema) {
+    let rules = smartQuotes.concat(ellipsis, emDash), type;
+    if (type = schema.nodes["blockquote"])
+        rules.push(blockQuoteRule(type));
+    if (type = schema.nodes["ordered_list"])
+        rules.push(orderedListRule(type));
+    if (type = schema.nodes["bullet_list"])
+        rules.push(bulletListRule(type));
+    if (type = schema.nodes["code_block"])
+        rules.push(codeBlockRule(type));
+    if (type = schema.nodes["heading"])
+        rules.push(headingRule(type, 6));
+    return inputRules({ rules });
+}
+/// Create an array of plugins pre-configured for the given schema.
+/// The resulting array will include the following plugins:
+///
+///  * Input rules for smart quotes and creating the block types in the
+///    schema using markdown conventions (say `"> "` to create a
+///    blockquote)
+///
+///  * A keymap that defines keys to create and manipulate the nodes in the
+///    schema
+///
+///  * A keymap binding the default keys provided by the
+///    prosemirror-commands module
+///
+///  * The undo history plugin
+///
+///  * The drop cursor plugin
+///
+///  * The gap cursor plugin
+///
+///  * A custom plugin that adds a `menuContent` prop for the
+///    prosemirror-menu wrapper, and a CSS class that enables the
+///    additional styling defined in `style/style.css` in this package
+///
+/// Probably only useful for quickly setting up a passable
+/// editor—you'll need more control over your settings in most
+/// real-world situations.
+function basicSetup(options) {
+    let plugins = [
+        buildInputRules(options.schema),
+        keymap(buildKeymap(options.schema, options.mapKeys)),
+        keymap(baseKeymap),
+        dropCursor(),
+        gapCursor()
+    ];
+    if (options.menuBar !== false)
+        plugins.push(menuBar({ floating: options.floatingMenu !== false,
+            content: buildMenuItems(options.schema, options.menuContent).fullMenu }));
+    if (options.history !== false)
+        plugins.push(history());
+    return plugins; /*.concat(new Plugin({
+      props: {
+        attributes: {class: "ProseMirror-example-setup-style"}
+      }
+    }))*/
+}
+
+class MarkdownPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, ...args) {
+        if (typeof value === 'string') {
+            const html = marked.parse(value.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""), {
+                async: false
+            });
+            return this.sanitizer.sanitize(SecurityContext.HTML, html);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MarkdownPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: MarkdownPipe, isStandalone: true, name: "markdown" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'markdown',
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class InlineMarkdownPipe {
+    transform(value, ...args) {
+        if (typeof value === 'string') {
+            let text = value;
+            if (text.length > 100)
+                text = text.substring(0, 100); // For inline text, we don't want all the text, just the start
+            text = text.replace(/!\[[^\]]*\]\([^)]*\)/g, ''); // images
+            text = text.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1'); // links -> visible text
+            text = text.replace(/^#{1,6}\s*/gm, ''); // headers
+            text = text.replace(/^\s*[-*+]\s+/gm, ''); // bullet lists
+            text = text.replace(/^\s*\d+[.)]\s+/gm, ''); // numbered lists
+            text = text.replace(/^\s*[-*]\s+/gm, ''); // bullets that were bold markers
+            text = text.replace(/\*\*([^*]*)\*\*/g, '$1'); // bold
+            text = text.replace(/\*([^*]*)\*/g, '$1'); // italic *
+            text = text.replace(/(?<!\w)_([^_\n]+)_(?!\w)/g, '$1'); // italic _text_
+            text = text.replace(/\s*\n\s*/g, ' '); // newlines -> spaces
+            text = text.replace(/\s{2,}/g, ' ').trim(); // collapse
+            if (text.length > 57) {
+                return text.substring(0, 57) + '...';
+            }
+            return text;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InlineMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: InlineMarkdownPipe, isStandalone: true, name: "inlineMarkdown" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InlineMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'inlineMarkdown',
+                }]
+        }] });
+
+class EditorComponent extends XtSimpleComponent {
+    constructor() {
+        super();
+        this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        this.resolver = inject(XtResolverService);
+        this.editor = viewChild('editor', ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+        this.sampleJson = { "type": "doc", "content": [{ "type": "heading", "attrs": { "level": 1 }, "content": [{ "type": "text", "text": "Example Text" }] }, { "type": "paragraph", "content": [{ "type": "text", "text": "s it working ?" }] }] };
+        this.emptyJson = { "type": "doc", "content": [{ "type": "paragraph" }] };
+        // Mix the nodes from prosemirror-schema-list into the basic schema to create a schema with list support.
+        /** mySchema: Schema = new Schema({
+          nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
+          marks: schema.spec.marks
+        });*/
+        // Creates the markdown schema
+        this.mySchema = schema;
+        this.view = null;
+        /**
+         * Enable dialog box for image or link editing
+         * @protected
+         */
+        this.displayAttrDialog = signal(false, ...(ngDevMode ? [{ debugName: "displayAttrDialog" }] : /* istanbul ignore next */ []));
+        this.editAttrForm = new FormGroup({});
+        this.editAttrNodeType = this.mySchema['image'];
+        this.editAttrValueType = "editorImageType";
+        const imageType = this.resolver.typeResolver.findType('image');
+        const linkType = this.resolver.typeResolver.findType('link');
+        // Register the type with the image type if supported
+        this.resolver.registerTypes({
+            editorImageType: {
+                children: {
+                    src: (imageType == null) ? "string" : "image",
+                    title: "string",
+                    alt: "string"
+                }
+            },
+            editorLinkType: {
+                children: {
+                    href: (linkType == null) ? "string" : "link",
+                    title: "string"
+                }
+            }
+        });
+        updateFormGroupWithValue(this.editAttrForm, {}, 'editorImageType', this.resolver.typeResolver);
+        // Setup the editor once the divs are available
+        effect(() => {
+            const editor = this.editor();
+            if ((editor != null) && (this.view == null)) {
+                const value = this.context().formControlValue();
+                const doc = this.toProseMirrorDoc(value);
+                this.view = new EditorView(editor.nativeElement, {
+                    state: EditorState.create({
+                        doc: doc,
+                        plugins: basicSetup({ schema: this.mySchema, menuContent: {
+                                image: this.imageMenu(this.mySchema.nodes['image'], this),
+                                link: this.linkMenu(this.mySchema.marks['link'], this)
+                            } })
+                    }),
+                    dispatchTransaction: this.handleTransactions.bind(this)
+                });
+            }
+        });
+    }
+    ngAfterViewInit() {
+        /*  this.editor.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe((jsonDoc) => {
+            this.handleChange(jsonDoc);
+          });*/
+    }
+    imageMenu(imageNodeType, that) {
+        return new MenuItem({
+            title: "Insert image",
+            label: "Image",
+            enable(state) {
+                return canInsert(state, imageNodeType);
+            },
+            run(state, _, view) {
+                let { from, to } = state.selection, attrs = {};
+                if (state.selection instanceof NodeSelection && state.selection.node.type == imageNodeType)
+                    attrs = state.selection.node.attrs || {};
+                if (attrs.alt == null)
+                    attrs.alt = state.doc.textBetween(from, to, " ");
+                that.editAttrValueType = "editorImageType";
+                updateFormGroupWithValue(that.editAttrForm, attrs, that.editAttrValueType, that.resolver.typeResolver);
+                that.editAttrNodeType = imageNodeType;
+                that.displayAttrDialog.set(true);
+            }
+        });
+    }
+    updateAttrsFromForm() {
+        if (this.view != null) {
+            if (this.editAttrValueType == "editorImageType") {
+                this.view.dispatch(this.view.state.tr.replaceSelectionWith((this.mySchema.nodes['image']).createAndFill(this.editAttrForm.value)));
+            }
+            else if (this.editAttrValueType == "editorLinkType") {
+                toggleMark(this.editAttrNodeType, this.editAttrForm.value)(this.view.state, this.view.dispatch);
+            }
+            this.view.focus();
+        }
+        this.displayAttrDialog.set(false);
+    }
+    linkMenu(linkMarkType, that) {
+        return new MenuItem({
+            title: "Add or Remove link",
+            icon: icons["link"],
+            active(state) { return markActive(state, linkMarkType); },
+            enable(state) { return !state.selection.empty; },
+            run(state, _, view) {
+                let { from, to } = state.selection, attrs = {};
+                if (markActive(state, linkMarkType)) {
+                    toggleMark(linkMarkType)(state, view.dispatch);
+                    return true;
+                }
+                that.editAttrValueType = "editorLinkType";
+                updateFormGroupWithValue(that.editAttrForm, attrs, that.editAttrValueType, that.resolver.typeResolver);
+                that.editAttrNodeType = linkMarkType;
+                that.displayAttrDialog.set(true);
+                return true;
+            }
+        });
+    }
+    handleTransactions(tr) {
+        if (this.view != null) {
+            const state = this.view.state.apply(tr);
+            this.view.updateState(state);
+            if (tr.docChanged) {
+                const markdown = defaultMarkdownSerializer.serialize(state.doc);
+                this.context().setFormValue(markdown, true);
+            }
+        }
+        else {
+            console.error("Editor: View transaction received while no view defined.", tr.doc.toJSON());
+        }
+    }
+    toProseMirrorDoc(value) {
+        if (value == null) {
+            return this.mySchema.nodeFromJSON(this.emptyJson);
+        }
+        if (typeof value === 'string') {
+            // This is a markdown text,
+            return defaultMarkdownParser.parse(value);
+        }
+        return this.mySchema.nodeFromJSON(value);
+    }
+    textJson(text) {
+        return { "type": "doc", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": text }] }] };
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: EditorComponent, isStandalone: true, selector: "xt-editor-editor", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isInForm() ) {\n  <div class=\"editorContainer\">\n    <div #editor [formGroup]=\"formGroup()\">\n    </div>\n  </div>\n  <p-dialog [visible]=\"displayAttrDialog()\" [modal]=\"true\" header=\"Edit\">\n    <form [formGroup]=\"editAttrForm\">\n      <xt-render [valueType]=\"editAttrValueType\" [formGroup]=\"editAttrForm\" displayMode=\"FULL_EDITABLE\" ></xt-render>\n    </form>\n    <ng-template #footer>\n      <button type=\"button\" pButton severity=\"secondary\" variant=\"outlined\" (click)=\"displayAttrDialog.set(false)\">Cancel</button>\n      <button type=\"button\" pButton (click)=\"updateAttrsFromForm()\">Save</button>\n    </ng-template>\n  </p-dialog>\n} @else {\n  @let toDisplay=displayValue();\n  @if (toDisplay!=null) {\n    @if (context().displayMode=='FULL_VIEW') {\n      <div class=\"displayForm\" [innerHTML]=\"displayValue() | markdown\">\n      </div>\n    } @else {\n      <span [pTooltip]=\"fullText\">{{ toDisplay | inlineMarkdown}}</span>\n      <ng-template #fullText>\n        <div class=\"toolTip\" [innerHTML]=\"displayValue() | markdown\">\n        </div>\n      </ng-template>\n    }\n  }\n}\n", styles: [".editorContainer{width:60em;border:white solid thin;padding:5px}.toolTip{white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: XtRenderComponent, selector: "xt-render", inputs: ["componentType", "displayMode", "valueType", "value", "formGroup", "subName", "inputs", "models"], outputs: ["valueChange", "outputs"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }, { kind: "pipe", type: InlineMarkdownPipe, name: "inlineMarkdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xt-editor-editor', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MarkdownPipe, InlineMarkdownPipe, Tooltip, Dialog,
+                        XtRenderComponent, ButtonDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isInForm() ) {\n  <div class=\"editorContainer\">\n    <div #editor [formGroup]=\"formGroup()\">\n    </div>\n  </div>\n  <p-dialog [visible]=\"displayAttrDialog()\" [modal]=\"true\" header=\"Edit\">\n    <form [formGroup]=\"editAttrForm\">\n      <xt-render [valueType]=\"editAttrValueType\" [formGroup]=\"editAttrForm\" displayMode=\"FULL_EDITABLE\" ></xt-render>\n    </form>\n    <ng-template #footer>\n      <button type=\"button\" pButton severity=\"secondary\" variant=\"outlined\" (click)=\"displayAttrDialog.set(false)\">Cancel</button>\n      <button type=\"button\" pButton (click)=\"updateAttrsFromForm()\">Save</button>\n    </ng-template>\n  </p-dialog>\n} @else {\n  @let toDisplay=displayValue();\n  @if (toDisplay!=null) {\n    @if (context().displayMode=='FULL_VIEW') {\n      <div class=\"displayForm\" [innerHTML]=\"displayValue() | markdown\">\n      </div>\n    } @else {\n      <span [pTooltip]=\"fullText\">{{ toDisplay | inlineMarkdown}}</span>\n      <ng-template #fullText>\n        <div class=\"toolTip\" [innerHTML]=\"displayValue() | markdown\">\n        </div>\n      </ng-template>\n    }\n  }\n}\n", styles: [".editorContainer{width:60em;border:white solid thin;padding:5px}.toolTip{white-space:normal}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
+
+function registerEditorPlugin(resolverService) {
+    const pluginName = "Plugin Editor";
+    console.info('Registering ' + pluginName);
+    resolverService.registerPlugin({
+        name: pluginName,
+        uriLogo: 'pluginicon.png',
+        cssUrls: [
+            'prosemirror-view/style/prosemirror.css',
+            'prosemirror-menu/style/menu.css',
+            'prosemirror-gapcursor/style/gapcursor.css'
+        ],
+        components: [
+            {
+                componentName: 'Editor',
+                componentClass: EditorComponent,
+                typesHandled: ['markdown', 'rich-text', 'description'],
+            }
+        ],
+        types: {
+            'markdown': 'string',
+            'rich-text': 'string',
+            'description': 'string'
+        }
+    });
+    return pluginName;
+}
+function registerPlugin(resolverService) {
+    return registerEditorPlugin(resolverService);
+}
+
+/*
+ * Public API Surface of web plugin
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditorComponent, MarkdownPipe, registerEditorPlugin, registerPlugin };
+//# sourceMappingURL=xt-plugin-editor.mjs.map