@dskripchenko/markdown-editor 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- 9eedfee: `toolbarTarget` shows the visual mode's toolbar in the host's own element (wysiwyg 0.7), and `modeSwitch: false` hides the mode buttons when the host switches modes itself through `v-model:mode`.
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -237,6 +237,11 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		maxHeight: { default: void 0 },
 		blockRenderers: { default: void 0 },
 		toolbarItems: { default: void 0 },
+		toolbarTarget: { default: void 0 },
+		modeSwitch: {
+			type: Boolean,
+			default: true
+		},
 		slashCommands: { default: void 0 },
 		locale: { default: void 0 },
 		labels: { default: void 0 },
@@ -338,7 +343,7 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"--dsk-md-min-h": __props.minHeight,
 					"--dsk-md-max-h": __props.maxHeight
 				})
-			}, [__props.modes.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			}, [__props.modeSwitch && __props.modes.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				class: "dsk-md__modes",
 				role: "group",
@@ -366,6 +371,7 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"max-height": __props.maxHeight,
 				"block-renderers": __props.blockRenderers,
 				"toolbar-items": __props.toolbarItems,
+				"toolbar-target": __props.toolbarTarget,
 				"slash-commands": __props.slashCommands,
 				locale: __props.locale,
 				"onUpdate:modelValue": onHtml
@@ -377,6 +383,7 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"max-height",
 				"block-renderers",
 				"toolbar-items",
+				"toolbar-target",
 				"slash-commands",
 				"locale"
 			])], 40, _hoisted_3)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [(0, vue.createElementVNode)("textarea", {

package/dist/index.d.ts

@@ -24,6 +24,7 @@ declare const __VLS_export: DefineComponent<__VLS_PublicProps, {
     modelValue: string;
     placeholder: string;
     toolbarItems: ToolbarItem[];
+    toolbarTarget: string | HTMLElement;
     readonly: boolean;
     minHeight: string;
     maxHeight: string;
@@ -32,6 +33,7 @@ declare const __VLS_export: DefineComponent<__VLS_PublicProps, {
     locale: MarkdownEditorLocale;
     labels: Partial<MarkdownEditorLabels>;
     modes: MarkdownEditorMode[];
+    modeSwitch: boolean;
     linkBase: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -48,6 +50,10 @@ declare type __VLS_Props = {
     maxHeight?: string;
     blockRenderers?: BlockRenderers;
     toolbarItems?: ToolbarItems;
+    /** Where the visual mode's toolbar is shown instead of above the text (an element or a CSS selector): the host's own bar. */
+    toolbarTarget?: string | HTMLElement;
+    /** The mode buttons above the editor; off when the host switches modes itself (`v-model:mode`). */
+    modeSwitch?: boolean;
     slashCommands?: SlashCommands;
     locale?: MarkdownEditorLocale;
     labels?: Partial<MarkdownEditorLabels>;

package/dist/index.mjs

@@ -236,6 +236,11 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 		maxHeight: { default: void 0 },
 		blockRenderers: { default: void 0 },
 		toolbarItems: { default: void 0 },
+		toolbarTarget: { default: void 0 },
+		modeSwitch: {
+			type: Boolean,
+			default: true
+		},
 		slashCommands: { default: void 0 },
 		locale: { default: void 0 },
 		labels: { default: void 0 },
@@ -337,7 +342,7 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 					"--dsk-md-min-h": __props.minHeight,
 					"--dsk-md-max-h": __props.maxHeight
 				})
-			}, [__props.modes.length > 1 ? (openBlock(), createElementBlock("div", {
+			}, [__props.modeSwitch && __props.modes.length > 1 ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "dsk-md__modes",
 				role: "group",
@@ -365,6 +370,7 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 				"max-height": __props.maxHeight,
 				"block-renderers": __props.blockRenderers,
 				"toolbar-items": __props.toolbarItems,
+				"toolbar-target": __props.toolbarTarget,
 				"slash-commands": __props.slashCommands,
 				locale: __props.locale,
 				"onUpdate:modelValue": onHtml
@@ -376,6 +382,7 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 				"max-height",
 				"block-renderers",
 				"toolbar-items",
+				"toolbar-target",
 				"slash-commands",
 				"locale"
 			])], 40, _hoisted_3)) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("textarea", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dskripchenko/markdown-editor",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Markdown editor for Vue 3 that edits like a word processor: the value is Markdown, the editing is the @dskripchenko/wysiwyg engine — its toolbar, slash menu, shortcuts and live blocks — with source and side-by-side modes, and a lossless round trip",
   "keywords": [
     "markdown",
@@ -52,13 +52,13 @@
   ],
   "peerDependencies": {
     "@dskripchenko/ui": "^1.19.1",
-    "@dskripchenko/wysiwyg": "^0.6.0",
+    "@dskripchenko/wysiwyg": "^0.7.0",
     "vue": "^3.4.0"
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
     "@dskripchenko/ui": "^1.19.1",
-    "@dskripchenko/wysiwyg": "^0.6.0",
+    "@dskripchenko/wysiwyg": "^0.7.0",
     "@eslint/js": "^10.0.1",
     "@microsoft/api-extractor": "^7.60.1",
     "@types/node": "^22.20.5",