@icure/form 1.0.0

package/lib/iqr-text-field/index.js

@@ -0,0 +1,335 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Import the LitElement base class and html helper function
+const lit_element_1 = require("lit-element");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const prosemirror_history_1 = require("prosemirror-history");
+const prosemirror_keymap_1 = require("prosemirror-keymap");
+const prosemirror_commands_1 = require("prosemirror-commands");
+const prosemirror_schema_list_1 = require("prosemirror-schema-list");
+const schema_1 = require("./schema");
+const markdown_it_1 = __importDefault(require("markdown-it"));
+const prosemirror_markdown_1 = require("prosemirror-markdown");
+const prosemirror_commands_2 = require("./prosemirror-commands");
+const selection_companion_1 = require("./selection-companion");
+const suggestion_palette_1 = require("./suggestion-palette");
+const caret_fix_plugin_1 = require("./plugin/caret-fix-plugin");
+const prosemirror_utils_1 = require("./prosemirror-utils");
+// @ts-ignore
+const style_scss_1 = __importDefault(require("./styles/style.scss"));
+// @ts-ignore
+const kendo_scss_1 = __importDefault(require("./styles/kendo.scss"));
+const mask_plugin_1 = require("./plugin/mask-plugin");
+const has_content_class_plugin_1 = require("./plugin/has-content-class-plugin");
+const regexp_plugin_1 = require("./plugin/regexp-plugin");
+// Extend the LitElement base class
+class IqrTextField extends lit_element_1.LitElement {
+    constructor() {
+        super();
+        this.suggestionStopWords = new Set();
+        this.linksProvider = () => Promise.resolve(undefined);
+        this.suggestionProvider = () => [];
+        this.codeColorProvider = () => 'XI';
+        this.linkColorProvider = () => 'cat1';
+        this.codeContentProvider = (codes) => codes.map(c => c.code).join(',');
+        this.schema = 'styled-text-with-codes';
+        this.label = '';
+        this.labelPosition = 'float';
+        this.placeholder = '';
+        this.value = '';
+        this.displayOwnerMenu = false;
+        this.suggestions = false;
+        this.links = false;
+        this.textRegex = '';
+        this.windowListeners = [];
+        this.mouseCount = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const cmu = this.mouseUp.bind(this);
+        const cmd = this.mouseDown.bind(this);
+        this.windowListeners.push(['mouseup', cmu], ['mousedown', cmd]);
+        window.addEventListener('mouseup', cmu);
+        window.addEventListener('mousedown', cmd);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.windowListeners.forEach(wl => window.removeEventListener(wl[0], wl[1]));
+    }
+    static get styles() {
+        return [style_scss_1.default, kendo_scss_1.default];
+    }
+    render() {
+        return lit_element_1.html `
+		<div id="root" class="iqr-text-field" data-placeholder=${this.placeholder}>
+				<label class="iqr-label ${this.labelPosition}"><span>${this.label}</span></label>
+				<div class="iqr-input">
+					<div id="editor"></div>
+					<div id="extra" class=${'extra' + (this.displayOwnerMenu ? ' forced' : '')}>
+						<div class="info">
+								~${this.owner}
+						</div>
+						<div class="buttons-container">
+							<div class="menu-container">
+								<button data-content="${this.owner}" @click="${this.toggleOwnerMenu}" class="btn menu-trigger author">
+									<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5ZM7 3C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3ZM5.00001 9C6.53071 9 7.8606 8.1402 8.53306 6.8772C7.62844 6.33518 6.37946 6 5.00001 6C3.62055 6 2.37158 6.33517 1.46695 6.87719C2.13941 8.14019 3.4693 9 5.00001 9Z"/>
+									</svg>
+								</button>
+								${this.displayOwnerMenu ? lit_element_1.html `
+								<div id="menu" class="menu">
+									<div class="input-container">
+										<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+											<path d="M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z" fill="#809AB4"/>
+										</svg>
+									 <input>
+									</div>
+									<button class="item">
+										Jean René
+									</button>
+									<button class="item">
+										Jean José
+									</button>
+									<button class="item">
+										Marie-Josée Perrec
+									</button>
+								</div>
+								` : ''}
+					 </div>
+							<div class="menu-container">
+							<button data-content="01/02/20" class="btn date">
+								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V8C0 9.10457 0.89543 10 2 10H8C9.10457 10 10 9.10457 10 8V2C10 0.895431 9.10457 0 8 0H2ZM1 3V8C1 8.55229 1.44772 9 2 9H8C8.55229 9 9 8.55229 9 8V3H1ZM8 8H5V5H8V8Z"/>
+								</svg>
+							</button>
+							</div>
+							<div class="menu-container">
+							<button data-content="1.0" class="btn version">
+								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76141 10 10 7.76142 10 5C10 2.23858 7.76141 0 5 0C2.23859 0 0 2.23858 0 5C0 7.76142 2.23859 10 5 10ZM3.5 3.33172C3.03394 3.16698 2.70001 2.72249 2.70001 2.2C2.70001 1.53726 3.23727 1 3.90002 1C4.56274 1 5.10001 1.53726 5.10001 2.2C5.10001 2.72249 4.76608 3.16698 4.30002 3.33172V5.04041C4.73386 4.59767 5.31354 4.29838 5.96133 4.22028C6.12021 3.74364 6.56998 3.4 7.10001 3.4C7.76276 3.4 8.30002 3.93726 8.30002 4.6C8.30002 5.26274 7.76276 5.8 7.10001 5.8C6.58722 5.8 6.14957 5.47836 5.97775 5.02583C5.13132 5.16293 4.46295 5.8313 4.32584 6.67775C4.77838 6.84955 5.10001 7.28722 5.10001 7.8C5.10001 8.46274 4.56274 9 3.90002 9C3.23727 9 2.70001 8.46274 2.70001 7.8C2.70001 7.27751 3.03394 6.83302 3.5 6.66828V3.33172ZM3.5 7.8C3.5 7.58001 3.67758 7.4015 3.89722 7.4H3.9028C4.12241 7.4015 4.29999 7.58001 4.29999 7.8C4.29999 8.0209 4.12091 8.2 3.89999 8.2C3.67908 8.2 3.5 8.0209 3.5 7.8ZM6.70001 4.59555V4.60446C6.70239 4.82333 6.88055 5.00001 7.09998 5.00001C7.32089 5.00001 7.5 4.82092 7.5 4.60001C7.5 4.37909 7.32089 4.2 7.09998 4.2C6.88055 4.2 6.70239 4.37669 6.70001 4.59555ZM3.89999 2.6C4.12091 2.6 4.29999 2.42091 4.29999 2.2C4.29999 1.97909 4.12091 1.8 3.89999 1.8C3.67908 1.8 3.5 1.97909 3.5 2.2C3.5 2.42091 3.67908 2.6 3.89999 2.6Z"/>
+								</svg>
+							</button>
+							</div>
+							<div class="menu-container">
+							<button data-content="fr" class="btn language">
+								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 0C2.2379 0 0 2.2379 0 5C0 7.7621 2.2379 10 5 10C7.7621 10 10 7.7621 10 5C10 2.2379 7.7621 0 5 0ZM9.03226 5C9.03226 5.45363 8.95363 5.89113 8.81452 6.29839H8.40524C8.31855 6.29839 8.23589 6.26411 8.1754 6.20161L7.53024 5.54435C7.43952 5.45161 7.43952 5.3004 7.53226 5.20766L7.78427 4.95565V4.78024C7.78427 4.71976 7.76008 4.66129 7.71774 4.61895L7.52823 4.42944C7.48589 4.3871 7.42742 4.3629 7.36694 4.3629H7.04435C6.91935 4.3629 6.81653 4.26008 6.81653 4.13508C6.81653 4.0746 6.84073 4.01613 6.88306 3.97379L7.07258 3.78427C7.11492 3.74194 7.17339 3.71774 7.23387 3.71774H7.87903C8.00403 3.71774 8.10685 3.61492 8.10685 3.48992V3.3004C8.10685 3.1754 8.00403 3.07258 7.87903 3.07258H7.13911C6.96169 3.07258 6.81653 3.21774 6.81653 3.39516V3.48589C6.81653 3.625 6.72782 3.74798 6.59677 3.79234L5.95968 4.00403C5.89315 4.02621 5.84879 4.08669 5.84879 4.15726V4.20161C5.84879 4.29032 5.77621 4.3629 5.6875 4.3629H5.36492C5.27621 4.3629 5.20363 4.29032 5.20363 4.20161C5.20363 4.1129 5.13105 4.04032 5.04234 4.04032H4.97984C4.91935 4.04032 4.8629 4.0746 4.83468 4.12903L4.64516 4.50605C4.59073 4.61492 4.47984 4.68347 4.35685 4.68347H3.91129C3.73387 4.68347 3.58871 4.53831 3.58871 4.36089V3.85081C3.58871 3.76613 3.62298 3.68347 3.68347 3.62298L4.08871 3.21774C4.18145 3.125 4.23387 2.99798 4.23387 2.86492C4.23387 2.79637 4.27823 2.73387 4.34476 2.71169L5.15121 2.44355C5.18548 2.43145 5.21573 2.41331 5.23992 2.38911L5.78024 1.84879C5.82258 1.80645 5.84677 1.74798 5.84677 1.6875C5.84677 1.5625 5.74395 1.45968 5.61895 1.45968H5.20161L4.87903 1.78226V1.94355C4.87903 2.03226 4.80645 2.10484 4.71774 2.10484H4.39516C4.30645 2.10484 4.23387 2.03226 4.23387 1.94355V1.54032C4.23387 1.48992 4.25806 1.44153 4.29839 1.41129L4.88105 0.97379C4.91935 0.971774 4.95766 0.967742 4.99597 0.967742C7.22379 0.967742 9.03226 2.77621 9.03226 5ZM2.62298 2.84476C2.62298 2.78427 2.64718 2.72581 2.68952 2.68347L3.20161 2.17137C3.24395 2.12903 3.30242 2.10484 3.3629 2.10484C3.4879 2.10484 3.59073 2.20766 3.59073 2.33266V2.65524C3.59073 2.71573 3.56653 2.77419 3.52419 2.81653L3.33468 3.00605C3.29234 3.04839 3.23387 3.07258 3.17339 3.07258H2.85081C2.72581 3.07258 2.62298 2.96976 2.62298 2.84476ZM5.20363 9.02218V8.87903C5.20363 8.70161 5.05847 8.55645 4.88105 8.55645H4.47379C4.25605 8.55645 3.93548 8.4496 3.76008 8.31855L3.3125 7.98185C3.08065 7.80847 2.94556 7.53629 2.94556 7.24798V6.76613C2.94556 6.44355 3.11492 6.14516 3.39113 5.97984L4.25605 5.46169C4.39919 5.37702 4.5625 5.33065 4.72782 5.33065H5.35685C5.57661 5.33065 5.78831 5.40927 5.95363 5.5504L6.8246 6.29839H7.19355C7.36492 6.29839 7.52823 6.36694 7.64919 6.4879L7.99798 6.83669C8.06653 6.90524 8.16129 6.94355 8.25806 6.94355H8.52823C7.875 8.13105 6.6371 8.9496 5.20363 9.02218Z"/>
+								</svg>
+							</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+    `;
+    }
+    toggleOwnerMenu() {
+        this.displayOwnerMenu = !this.displayOwnerMenu;
+    }
+    mouseDown() {
+        this.mouseCount++;
+        console.log(this.mouseCount);
+    }
+    mouseUp() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.mouseCount = 0;
+        if (!((_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('ProseMirror-focused'))) {
+            (_g = (_f = (_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.dom) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.querySelectorAll('.companion')) === null || _g === void 0 ? void 0 : _g.forEach(x => {
+                x.style.display = 'none';
+            });
+        }
+    }
+    firstUpdated() {
+        var _a;
+        const schema = this.proseMirrorSchema = schema_1.createSchema(this.schema, (t, c, isC) => isC ? this.codeColorProvider(t, c) : this.linkColorProvider(t, c), this.codeContentProvider);
+        const tokenizer = markdown_it_1.default("commonmark", { html: false });
+        this.parser = this.schema === 'date' ? {
+            parse: (value) => schema.node("paragraph", {}, [
+                schema.node("date", {}, value ? [schema.text(value)] : []),
+            ])
+        } : this.schema === 'date-time' ? {
+            parse: (value) => {
+                const date = value ? value.split(' ')[0] : '';
+                const time = value ? value.split(' ')[1] : '';
+                return schema.node("paragraph", {}, [
+                    schema.node("date", {}, date && date.length ? [schema.text(date)] : [schema.text(' ')]),
+                    schema.node("time", {}, time && time.length ? [schema.text(time)] : [schema.text(' ')]),
+                ]);
+            }
+        } : this.schema === 'text-document' ? new prosemirror_markdown_1.MarkdownParser(schema, markdown_it_1.default("commonmark", { html: false }), {
+            blockquote: { block: "blockquote" },
+            paragraph: { block: "paragraph" },
+            list_item: { block: "list_item" },
+            bullet_list: { block: "bullet_list" },
+            ordered_list: { block: "ordered_list", getAttrs: tok => ({ order: +(tok.attrGet("start") || 1) }) },
+            heading: { block: "heading", getAttrs: tok => ({ level: +tok.tag.slice(1) }) },
+            hr: { node: "horizontal_rule" },
+            image: { node: "image", getAttrs: tok => {
+                    var _a;
+                    return ({
+                        src: tok.attrGet("src"),
+                        title: tok.attrGet("title") || null,
+                        alt: ((_a = (tok.children || [])[0]) === null || _a === void 0 ? void 0 : _a.content) || null
+                    });
+                } },
+            hardbreak: { node: "hard_break" },
+            em: prosemirror_utils_1.hasMark(schema.spec.marks, 'em') ? { mark: "em" } : { ignore: true },
+            strong: prosemirror_utils_1.hasMark(schema.spec.marks, 'strong') ? { mark: "strong" } : { ignore: true },
+            link: prosemirror_utils_1.hasMark(schema.spec.marks, 'link') ? { mark: "link", getAttrs: tok => ({
+                    href: tok.attrGet("href"),
+                    title: tok.attrGet("title") || null
+                }) } : { ignore: true }
+        }) : new prosemirror_markdown_1.MarkdownParser(schema, { parse: (src, env) => {
+                return tokenizer.parse(src, env).filter(t => !t.type.startsWith('paragraph_'));
+            } }, {
+            em: prosemirror_utils_1.hasMark(schema.spec.marks, 'em') ? { mark: "em" } : { ignore: true },
+            strong: prosemirror_utils_1.hasMark(schema.spec.marks, 'strong') ? { mark: "strong" } : { ignore: true },
+            link: prosemirror_utils_1.hasMark(schema.spec.marks, 'link') ? { mark: "link", getAttrs: tok => ({
+                    href: tok.attrGet("href"),
+                    title: tok.attrGet("title") || null
+                }) } : { ignore: true }
+        });
+        const cmp = this;
+        this.container = ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('editor')) || undefined;
+        let br = schema.nodes.hard_break;
+        const hardBreak = prosemirror_commands_1.chainCommands(prosemirror_commands_1.exitCode, (state, dispatch) => {
+            dispatch && dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+            return true;
+        });
+        const replaceRangeWithSuggestion = (from, to, sug) => __awaiter(this, void 0, void 0, function* () {
+            const link = yield this.linksProvider(sug);
+            return link && cmp.view.state.tr.replaceWith(from, to, this.proseMirrorSchema.text(sug.text, [this.proseMirrorSchema.mark('link', link)])) || undefined;
+        });
+        if (this.container) {
+            let headingsKeymap = prosemirror_keymap_1.keymap([1, 2, 3, 4, 5, 6].reduce((acc, idx) => {
+                return Object.assign(acc, { [`Mod-ctrl-${idx}`]: prosemirror_commands_1.setBlockType(this.proseMirrorSchema.nodes.heading, { level: '' + idx }) });
+            }, {}));
+            const parsedDoc = this.parser.parse(this.value);
+            this.view = new prosemirror_view_1.EditorView(this.container, {
+                state: prosemirror_state_1.EditorState.create({
+                    doc: parsedDoc,
+                    schema: this.proseMirrorSchema,
+                    plugins: [
+                        caret_fix_plugin_1.caretFixPlugin(),
+                        prosemirror_history_1.history(),
+                        this.links ?
+                            new prosemirror_state_1.Plugin({
+                                view(editorView) { return new selection_companion_1.SelectionCompanion(editorView, () => cmp.mouseCount > 0); }
+                            }) : null,
+                        this.suggestions ?
+                            new prosemirror_state_1.Plugin({
+                                view(editorView) { return (cmp.suggestionPalette = new suggestion_palette_1.SuggestionPalette(editorView, (terms) => cmp.suggestionProvider(terms), () => cmp.suggestionStopWords)); }
+                            }) : null,
+                        this.suggestions ?
+                            prosemirror_keymap_1.keymap({
+                                "Tab": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.focusOrInsert(this.view, replaceRangeWithSuggestion) || false; },
+                                "ArrowUp": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.arrowUp() || false; },
+                                "ArrowDown": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.arrowDown() || false; },
+                                "Enter": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.insert(this.view, replaceRangeWithSuggestion) || false; },
+                            }) : null,
+                        prosemirror_keymap_1.keymap({ "Mod-z": prosemirror_history_1.undo, "Mod-Shift-z": prosemirror_history_1.redo }),
+                        prosemirror_keymap_1.keymap(Object.assign({}, schema.marks.strong ? { "Mod-b": prosemirror_commands_1.toggleMark(schema.marks.strong) } : {}, schema.marks.em ? { "Mod-i": prosemirror_commands_1.toggleMark(schema.marks.em) } : {}, schema.nodes.paragraph ? { "Alt-ArrowUp": prosemirror_commands_1.joinUp } : {}, schema.nodes.paragraph ? { "Alt-ArrowDown": prosemirror_commands_1.joinDown } : {}, schema.nodes.paragraph ? { "Alt-Enter": hardBreak } : {}, schema.nodes.paragraph ? { "Shift-Enter": hardBreak } : {}, schema.nodes.ordered_list ? { "Shift-ctrl-1": prosemirror_schema_list_1.wrapInList(schema.nodes.ordered_list) } : {}, schema.nodes.bullet_list ? { "Shift-ctrl-*": prosemirror_schema_list_1.wrapInList(schema.nodes.bullet_list) } : {}, schema.nodes.blockquote ? { "Shift-ctrl-w": prosemirror_commands_2.wrapInIfNeeded(schema.nodes.blockquote) } : {}, schema.nodes.blockquote ? { "Shift-ctrl-u": prosemirror_commands_2.unwrapFrom(schema.nodes.blockquote) } : {}, schema.nodes.paragraph ? { "Mod-ctrl-0": prosemirror_commands_1.setBlockType(schema.nodes.paragraph) } : {}, schema.nodes.paragraph ? { "Shift-ctrl-0": prosemirror_commands_1.setBlockType(schema.nodes.paragraph) } : {}, schema.nodes.list_item ? { "Enter": prosemirror_schema_list_1.splitListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-(": prosemirror_schema_list_1.liftListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-[": prosemirror_schema_list_1.liftListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-)": prosemirror_schema_list_1.sinkListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-]": prosemirror_schema_list_1.sinkListItem(schema.nodes.list_item) } : {})),
+                        schema.nodes.heading ? headingsKeymap : null,
+                        mask_plugin_1.maskPlugin(),
+                        regexp_plugin_1.regexpPlugin(),
+                        has_content_class_plugin_1.hasContentClassPlugin(this.shadowRoot),
+                        prosemirror_keymap_1.keymap(prosemirror_commands_1.baseKeymap)
+                    ].filter(x => !!x).map(x => x)
+                }),
+                dispatchTransaction: (tr) => {
+                    this.view && this.view.updateState(this.view.state.apply(tr));
+                    //current state as json in text area
+                    //this.view && console.log(JSON.stringify(this.view.state.doc.toJSON(), null, 2));
+                }
+            });
+        }
+    }
+}
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Set)
+], IqrTextField.prototype, "suggestionStopWords", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "linksProvider", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "suggestionProvider", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "codeColorProvider", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "linkColorProvider", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "codeContentProvider", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "schema", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "label", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "labelPosition", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "placeholder", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "value", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "owner", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Boolean)
+], IqrTextField.prototype, "displayOwnerMenu", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Boolean)
+], IqrTextField.prototype, "suggestions", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", Boolean)
+], IqrTextField.prototype, "links", void 0);
+__decorate([
+    lit_element_1.property(),
+    __metadata("design:type", String)
+], IqrTextField.prototype, "textRegex", void 0);
+// Register the new element with the browser.
+customElements.define('iqr-text-field', IqrTextField);

package/lib/iqr-text-field/plugin/caret-fix-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const caretFixPlugin: () => Plugin<any, any>;

package/lib/iqr-text-field/plugin/caret-fix-plugin.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.caretFixPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+exports.caretFixPlugin = () => {
+    let focusing = false;
+    return new prosemirror_state_1.Plugin({
+        props: {
+            handleDOMEvents: {
+                focus: view => {
+                    if (focusing) {
+                        focusing = false;
+                    }
+                    else {
+                        focusing = true;
+                        setTimeout(() => { view.dom.blur(); view.dom.focus(); }, 0);
+                    }
+                    return false;
+                }
+            }
+        }
+    });
+};

package/lib/iqr-text-field/plugin/has-content-class-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const hasContentClassPlugin: (root: DocumentFragment) => Plugin<any, any>;

package/lib/iqr-text-field/plugin/has-content-class-plugin.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasContentClassPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+exports.hasContentClassPlugin = (root) => {
+    return new prosemirror_state_1.Plugin({
+        view: (v) => {
+            var _a, _b;
+            v.state.doc.textContent && v.state.doc.textContent.length && ((_b = (_a = root === null || root === void 0 ? void 0 : root.getElementById('root')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('has-content'));
+            return {
+                update: (v, s) => {
+                    var _a, _b, _c, _d;
+                    v.state.doc.textContent && v.state.doc.textContent.length ? (_b = (_a = root === null || root === void 0 ? void 0 : root.getElementById('root')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('has-content') : (_d = (_c = root.getElementById('root')) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove('has-content');
+                }
+            };
+        }
+    });
+};

package/lib/iqr-text-field/plugin/mask-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const maskPlugin: () => Plugin<any, any>;

package/lib/iqr-text-field/plugin/mask-plugin.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maskPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+exports.maskPlugin = () => {
+    const maskText = ($pos, text, mask, tr, setSelection = true) => {
+        const textFromBeginning = $pos.parent.textBetween(0, $pos.parentOffset) + text;
+        const trailingText = $pos.parent.textBetween($pos.parentOffset, $pos.parent.content.size);
+        let t = textFromBeginning;
+        let skip = 0;
+        let completed = false;
+        if (t.length === 0) {
+            t += trailingText.substring(text.length + skip);
+            completed = true;
+        }
+        for (let i = 0; i < mask.length && i < t.length; i++) {
+            if (mask[i] === '.' && t[i].normalize("NFD").replace(/[\u0300-\u036f]/g, "").match(/\w|-/) ||
+                mask[i] === '-' && t[i].match(/\d/)) {
+                //skip
+            }
+            else {
+                if (mask[i] === t[i]) {
+                    //skip
+                }
+                else {
+                    t = t.substring(0, i) + mask[i] + t.substring(i);
+                    if (!completed)
+                        skip++;
+                }
+            }
+            if (t.length === i + 1 && !completed) {
+                t += trailingText.substring(text.length + skip);
+                completed = true;
+            }
+        }
+        const tail = t.length > mask.length ? t.substring(mask.length) : '';
+        t = t.substring(0, mask.length);
+        let trail = t.length < mask.length ? mask.substring(t.length) : '';
+        if (t === textFromBeginning && trail === trailingText) {
+            return undefined;
+        }
+        const currentSel = tr.selection;
+        tr = tr.insertText(t + trail, $pos.pos - $pos.parentOffset, $pos.pos - $pos.parentOffset + $pos.parent.content.size);
+        if (setSelection) {
+            tr = tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, Math.min($pos.pos + text.length + skip, tr.doc.content.size - 1)));
+        }
+        else {
+            tr = tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, Math.min(currentSel.$anchor.pos, tr.doc.content.size - 1), Math.min(currentSel.$head.pos, tr.doc.content.size - 1)));
+        }
+        tr.setMeta("tailText", tail);
+        return tr;
+    };
+    function applyDocMasks(state) {
+        let tr = undefined;
+        let posMark = 0;
+        //Scan nodes and add mask when needed
+        while ((tr || state).doc && posMark < (tr || state).doc.content.size) {
+            const $pos = (tr || state).doc.resolve(posMark);
+            const node = $pos.node($pos.depth) || undefined;
+            const mask = node === null || node === void 0 ? void 0 : node.type.spec.mask;
+            if (mask) {
+                tr = tr || state.tr;
+                tr = maskText(tr.doc.resolve(posMark), '', mask, tr, false) || tr;
+                const $newPos = tr.doc.resolve(posMark);
+                const newNode = $newPos.node($newPos.depth);
+                if (newNode) {
+                    posMark += newNode.content.size + 1;
+                }
+                else
+                    posMark++;
+            }
+            else {
+                posMark++;
+            }
+        }
+        return tr;
+    }
+    return new prosemirror_state_1.Plugin({
+        view: (v) => {
+            let tr = applyDocMasks(v.state);
+            if (tr)
+                v.updateState(v.state.apply(tr));
+            return {};
+        },
+        props: {
+            decorations(state) {
+                let $pos = state.doc.resolve(Math.min(state.selection.$from.pos, state.doc.content.size));
+                let node = $pos.parent;
+                let start = $pos.pos - $pos.parentOffset;
+                if (node.type.spec.mask) {
+                    if (node.type.spec.mask.length === $pos.parentOffset && node.type.spec.mask.length === node.content.size) {
+                        //Move to the next one
+                        while ($pos.pos < state.doc.content.size - 1) {
+                            $pos = state.doc.resolve($pos.pos + 1);
+                            node = $pos.parent;
+                            if (node && node.type.spec.mask) {
+                                start = $pos.pos - $pos.parentOffset;
+                                break;
+                            }
+                        }
+                    }
+                    return prosemirror_view_1.DecorationSet.create(state.doc, [
+                        prosemirror_view_1.Decoration.node(start - 1, start - 1 + node.nodeSize, { class: "focused" })
+                    ]);
+                }
+                return undefined;
+            },
+            handleTextInput: (view, from, to, text) => {
+                if (view.composing)
+                    return false;
+                const state = view.state;
+                const $from = state.doc.resolve(from);
+                const mask = $from.parent.type.spec.mask;
+                const regexp = $from.parent.type.spec.regexp;
+                if (!mask)
+                    return false;
+                const tr = maskText($from, regexp && regexp.length ? text.split('').filter(x => x.match(new RegExp(regexp))).join('') : text, mask, state.tr);
+                if (tr) {
+                    const tail = tr.getMeta('tailText');
+                    if (tail === null || tail === void 0 ? void 0 : tail.length) {
+                        const nextPos = tr.selection.$to.pos < tr.doc.content.size ? tr.doc.resolve(tr.selection.$to.pos + 1) : undefined;
+                        if (nextPos) {
+                            const nextNode = nextPos.node(nextPos.depth);
+                            if (nextNode && nextNode.type.spec.mask && nextNode.type.spec.mask.length) {
+                                maskText(nextPos, tail, nextNode.type.spec.mask, tr);
+                            }
+                            else if (nextNode && (nextNode.type.isText || nextNode.type.isTextblock)) {
+                                tr.insertText(tail, nextPos.pos, nextPos.pos);
+                            }
+                        }
+                    }
+                    view.dispatch(tr);
+                    return true;
+                }
+                return false;
+            }
+        },
+        appendTransaction: (transactions, oldState, newState) => {
+            return applyDocMasks(newState);
+        }
+    });
+};

package/lib/iqr-text-field/plugin/regexp-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const regexpPlugin: () => Plugin<any, any>;

package/lib/iqr-text-field/plugin/regexp-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.regexpPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+exports.regexpPlugin = () => {
+    return new prosemirror_state_1.Plugin({
+        props: {
+            handleTextInput: (view, from, to, text) => {
+                if (view.composing)
+                    return false;
+                const state = view.state;
+                const $from = state.doc.resolve(from);
+                const mask = $from.parent.type.spec.mask;
+                const regexp = $from.parent.type.spec.regexp;
+                if (mask || !regexp)
+                    return false; // Will be handled by mask plugin
+                const allowedCharacters = text.split('').filter(x => x.match(new RegExp(regexp))).join('');
+                if (allowedCharacters === text)
+                    return false;
+                let tr = state.tr;
+                if (allowedCharacters.length) {
+                    tr = tr.insertText(allowedCharacters, from, to);
+                    tr = tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, Math.min(to + allowedCharacters.length, tr.doc.content.size - 1)));
+                }
+                if (text.startsWith(allowedCharacters)) {
+                    const tail = text.substring(allowedCharacters.length);
+                    if (tail === null || tail === void 0 ? void 0 : tail.length) {
+                        let posMark = tr.selection.$to.pos + 1;
+                        while (posMark < tr.doc.content.size) {
+                            const nextPos = tr.doc.resolve(posMark);
+                            const nextNode = nextPos.node(nextPos.depth);
+                            if (nextNode && (nextNode.type.isText || nextNode.type.isTextblock)) {
+                                tr = tr.insertText(tail, nextPos.pos, nextPos.pos);
+                                tr = tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, Math.min(nextPos.pos + tail.length, tr.doc.content.size - 1)));
+                                break;
+                            }
+                            posMark++;
+                        }
+                    }
+                }
+                view.dispatch(tr);
+                return true;
+            }
+        }
+    });
+};

package/lib/iqr-text-field/prosemirror-commands.d.ts

@@ -0,0 +1,4 @@
+import { NodeType } from "prosemirror-model";
+import { EditorState, Transaction } from "prosemirror-state";
+export declare function wrapInIfNeeded(nodeType: NodeType, attrs?: any): (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
+export declare function unwrapFrom(nodeType: NodeType): (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;

package/lib/iqr-text-field/prosemirror-commands.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unwrapFrom = exports.wrapInIfNeeded = void 0;
+const prosemirror_transform_1 = require("prosemirror-transform");
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+// :: (NodeType, ?Object) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool
+// Wrap the selection in a node of the given type with the given
+// attributes.
+function wrapInIfNeeded(nodeType, attrs) {
+    return function (state, dispatch) {
+        var _a, _b;
+        const { $from, $to, to } = state.selection;
+        const range = $from.blockRange($to);
+        if (!range) {
+            return false;
+        }
+        let same = range.$from.sharedDepth(to);
+        if (same) {
+            const pos = $from.before(same);
+            if (((_b = (_a = prosemirror_state_1.NodeSelection.create(state.doc, pos).$from) === null || _a === void 0 ? void 0 : _a.node()) === null || _b === void 0 ? void 0 : _b.type) === nodeType) {
+                return false;
+            }
+        }
+        const wrapping = range && prosemirror_transform_1.findWrapping(range, nodeType, attrs);
+        if (!wrapping)
+            return false;
+        if (dispatch)
+            dispatch(state.tr.wrap(range, wrapping).scrollIntoView());
+        return true;
+    };
+}
+exports.wrapInIfNeeded = wrapInIfNeeded;
+// :: (NodeType, ?Object) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool
+// Wrap the selection in a node of the given type with the given
+// attributes.
+function unwrapFrom(nodeType) {
+    return function (state, dispatch) {
+        const { $from, $to } = state.selection;
+        const range = $from.blockRange($to);
+        const depth = range && prosemirror_transform_1.liftTarget(range);
+        if (depth === null || depth === undefined) {
+            return false;
+        }
+        let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
+        const frag = prosemirror_model_1.Fragment.from($from.node());
+        if (dispatch)
+            dispatch(state.tr.replaceRange(gapStart, gapEnd, new prosemirror_model_1.Slice(frag, 0, 0)).scrollIntoView());
+        return true;
+    };
+}
+exports.unwrapFrom = unwrapFrom;