@segnavia/markdown-editor 0.42.0 → 0.44.0

package/dist/element-properties.d.ts

@@ -0,0 +1,8 @@
+//#region src/element-properties.d.ts
+export declare const MARKDOWN_EDITOR_TAG = "segnavia-markdown-editor";
+export declare const MARKDOWN_EDITOR_PROPERTIES: {
+  readonly tag: "segnavia-markdown-editor";
+  readonly properties: readonly ["markdown", "mode", "title", "titleSource", "lockedFences", "css", "fonts", "fontReferences", "linkOrigins", "alertLabels"];
+  readonly events: readonly ["segnavia-markdown-change", "segnavia-title-change", "segnavia-mode-change", "segnavia-save", "segnavia-editor-state", "segnavia-link-request"];
+};
+//#endregion

package/dist/element-properties.js

@@ -0,0 +1,27 @@
+//#region src/element-properties.ts
+const MARKDOWN_EDITOR_TAG = "segnavia-markdown-editor";
+const MARKDOWN_EDITOR_PROPERTIES = {
+	tag: MARKDOWN_EDITOR_TAG,
+	properties: [
+		"markdown",
+		"mode",
+		"title",
+		"titleSource",
+		"lockedFences",
+		"css",
+		"fonts",
+		"fontReferences",
+		"linkOrigins",
+		"alertLabels"
+	],
+	events: [
+		"segnavia-markdown-change",
+		"segnavia-title-change",
+		"segnavia-mode-change",
+		"segnavia-save",
+		"segnavia-editor-state",
+		"segnavia-link-request"
+	]
+};
+//#endregion
+export { MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG };

package/dist/markdown-editor-title.js

@@ -0,0 +1,14 @@
+import { setModelTitle } from "./markdown-editor-model.js";
+//#region src/markdown-editor-title.ts
+function updateMarkdownEditorTitle(model, value, source) {
+	return {
+		model: setModelTitle(model, value),
+		removeTitleAttribute: source === "attribute"
+	};
+}
+function renderMarkdownEditorTitle(field, model) {
+	field.hidden = model.titleSource === "separate" && model.title === null;
+	field.value = model.title ?? "";
+}
+//#endregion
+export { renderMarkdownEditorTitle, updateMarkdownEditorTitle };

package/dist/markdown-editor.d.ts

@@ -1,6 +1,7 @@
 import { MarkdownTitleSource } from "./markdown-editor-model.js";
 import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MarkdownEditorCommand, MarkdownEditorMode } from "./markdown-editor-policy.js";
 import { MarkdownEditorStateDetail, SegnaviaMarkdownEditor as SegnaviaMarkdownEditor$1 } from "./markdown-editor-types.js";
+import { MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG } from "./element-properties.js";
 import { joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading } from "./markdown-title.js";
 import { FontsOptions } from "@segnavia/frame/fonts";
 //#region src/markdown-editor.d.ts
@@ -9,4 +10,4 @@ export declare const SegnaviaMarkdownEditor: {
   new (): SegnaviaMarkdownEditor;
 };
 //#endregion
-export { type FontsOptions, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, type MarkdownEditorCommand, type MarkdownEditorMode, type MarkdownEditorStateDetail, type MarkdownTitleSource, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };
+export { type FontsOptions, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, type MarkdownEditorCommand, type MarkdownEditorMode, type MarkdownEditorStateDetail, type MarkdownTitleSource, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };

package/dist/markdown-editor.js

@@ -1,24 +1,27 @@
 import { ensureEditorStyle } from "./editor-style.js";
+import { MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG } from "./element-properties.js";
 import { MarkdownEditorFontRegistration } from "./markdown-editor-font-registration.js";
 import { validateMarkdownLink } from "./markdown-editor-link.js";
 import { joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading } from "./markdown-title.js";
 import { markdownEditorModel, setModelEditable, setModelMarkdown, setModelTitle, setModelTitleSource } from "./markdown-editor-model.js";
 import { equalAlertLabels, equalFontReferences, equalFonts, equalLockedFences, normalizeAlertLabels, normalizeFontReferences, normalizeLockedFences } from "./markdown-editor-options.js";
 import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, availableMarkdownMode, markdownEditorKeyAction, richModeCommandRefusal } from "./markdown-editor-policy.js";
+import { renderMarkdownEditorTitle, updateMarkdownEditorTitle } from "./markdown-editor-title.js";
 import { RICH_COMMANDS, lockedBlockSourceOffset, richEditorState, selectedLockedBlock } from "./markdown-rich-commands.js";
 import { mountRichEditor } from "./markdown-rich-editor.js";
 import { parseRichDocument, saveRichDocument } from "./markdown-rich-save.js";
 import { markdownSourceState } from "./markdown-source.js";
 import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
 import { EditorView } from "@codemirror/view";
+import { upgradeProperties } from "@segnavia/frame/element-properties";
 import { sanitizeBookCss } from "@segnavia/html";
 //#region src/markdown-editor.ts
-const TAG = "segnavia-markdown-editor";
 const COMMAND_NAMES = new Set(MARKDOWN_EDITOR_COMMANDS.map(({ name }) => name));
 var MarkdownEditorElement = class extends HTMLElement {
 	static observedAttributes = [
 		"markdown",
 		"mode",
+		"title",
 		"title-source"
 	];
 	root = this.attachShadow({ mode: "open" });
@@ -43,6 +46,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 	fontRegistration = new MarkdownEditorFontRegistration(this);
 	constructor() {
 		super();
+		upgradeProperties(this);
 		this.container.part.add("editor");
 		this.titleField.part.add("title");
 		this.titleField.type = "text";
@@ -59,7 +63,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 		this.titleField.addEventListener("keydown", this.onTitleKeyDown);
 		this.titleField.addEventListener("paste", this.onTitlePaste);
 		this.mountMode();
-		this.renderTitle();
+		renderMarkdownEditorTitle(this.titleField, this.model);
 	}
 	disconnectedCallback() {
 		this.titleField.removeEventListener("input", this.onTitleInput);
@@ -75,7 +79,10 @@ var MarkdownEditorElement = class extends HTMLElement {
 		if (this.reflecting) return;
 		if (name === "markdown") this.markdown = value ?? "";
 		else if (name === "mode") this.mode = value;
-		else this.titleSource = value === "leading-heading" ? "leading-heading" : "separate";
+		else if (name === "title") {
+			if (value === null) return;
+			this.setTitle(value, "attribute");
+		} else this.titleSource = value === "leading-heading" ? "leading-heading" : "separate";
 	}
 	get markdown() {
 		return this.model.markdown;
@@ -85,7 +92,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 		if (model === this.model) return;
 		this.model = model;
 		this.richOriginal = model.editable;
-		this.renderTitle();
+		renderMarkdownEditorTitle(this.titleField, this.model);
 		this.resetVisibleEditor();
 	}
 	get mode() {
@@ -101,11 +108,15 @@ var MarkdownEditorElement = class extends HTMLElement {
 		return this.model.title;
 	}
 	set title(value) {
-		const model = setModelTitle(this.model, value);
+		this.setTitle(value, "property");
+	}
+	setTitle(value, source) {
+		const { model, removeTitleAttribute } = updateMarkdownEditorTitle(this.model, value, source);
 		if (model !== this.model) {
 			this.model = model;
-			this.renderTitle();
+			renderMarkdownEditorTitle(this.titleField, this.model);
 		}
+		if (removeTitleAttribute) this.reflect("title", null);
 	}
 	get titleSource() {
 		return this.model.titleSource;
@@ -117,7 +128,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 		this.reflect("title-source", next === "separate" ? null : next);
 		this.model = model;
 		this.richOriginal = model.editable;
-		this.renderTitle();
+		renderMarkdownEditorTitle(this.titleField, this.model);
 		this.resetVisibleEditor();
 	}
 	get lockedFences() {
@@ -305,10 +316,6 @@ var MarkdownEditorElement = class extends HTMLElement {
 		this.titleField.setRangeText(normalizeMarkdownTitle(pasted), this.titleField.selectionStart ?? 0, this.titleField.selectionEnd ?? 0, "end");
 		this.onTitleInput();
 	};
-	renderTitle() {
-		this.titleField.hidden = this.model.titleSource === "separate" && this.model.title === null;
-		this.titleField.value = this.model.title ?? "";
-	}
 	emitSourceState(canUndo = this.sourceView ? undoDepth(this.sourceView.state) > 0 : false, canRedo = this.sourceView ? redoDepth(this.sourceView.state) > 0 : false) {
 		this.emitState({
 			marks: [],
@@ -343,6 +350,6 @@ var MarkdownEditorElement = class extends HTMLElement {
 	}
 };
 const SegnaviaMarkdownEditor = MarkdownEditorElement;
-if (!customElements.get(TAG)) customElements.define(TAG, SegnaviaMarkdownEditor);
+if (!customElements.get("segnavia-markdown-editor")) customElements.define(MARKDOWN_EDITOR_TAG, SegnaviaMarkdownEditor);
 //#endregion
-export { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, SegnaviaMarkdownEditor, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };
+export { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, SegnaviaMarkdownEditor, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };

package/dist/vue.d.ts

@@ -0,0 +1,29 @@
+import { MarkdownEditorMode } from "./markdown-editor-policy.js";
+import { MarkdownEditorStateDetail } from "./markdown-editor-types.js";
+import { MARKDOWN_EDITOR_PROPERTIES } from "./element-properties.js";
+import { SegnaviaMarkdownEditor } from "./markdown-editor.js";
+import { EventProps } from "@segnavia/frame/vue-types";
+import { DefineComponent } from "vue";
+//#region src/vue.d.ts
+export interface MarkdownEditorVueEventDetails {
+  'segnavia-markdown-change': {
+    markdown: string;
+  };
+  'segnavia-title-change': {
+    title: string;
+  };
+  'segnavia-mode-change': {
+    mode: MarkdownEditorMode;
+  };
+  'segnavia-save': unknown;
+  'segnavia-editor-state': MarkdownEditorStateDetail;
+  'segnavia-link-request': {
+    href: string | null;
+  };
+}
+type MarkdownEditorComponent = Partial<Pick<SegnaviaMarkdownEditor, (typeof MARKDOWN_EDITOR_PROPERTIES.properties)[number]>> & EventProps<typeof MARKDOWN_EDITOR_PROPERTIES.events, MarkdownEditorVueEventDetails>;
+type MarkdownEditorGlobalComponents = { [Tag in typeof MARKDOWN_EDITOR_PROPERTIES.tag]: DefineComponent<MarkdownEditorComponent>; };
+declare module 'vue' {
+  interface GlobalComponents extends MarkdownEditorGlobalComponents {}
+}
+//#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/markdown-editor",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,12 +28,17 @@
       "@segnavia/source": "./src/markdown-editor.ts",
       "types": "./dist/markdown-editor.d.ts",
       "default": "./dist/markdown-editor.js"
+    },
+    "./vue": {
+      "@segnavia/source": "./src/vue.ts",
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
     }
   },
   "dependencies": {
-    "@segnavia/format": "0.42.0",
-    "@segnavia/frame": "0.42.0",
-    "@segnavia/html": "0.42.0"
+    "@segnavia/format": "0.44.0",
+    "@segnavia/frame": "0.44.0",
+    "@segnavia/html": "0.44.0"
   },
   "peerDependencies": {
     "@codemirror/commands": "^6.11.1",