@eventuras/scribo 0.8.3 → 0.10.7

package/dist/utils/url.js

@@ -0,0 +1,33 @@
+//#region src/utils/url.ts
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+* Source: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/utils/url.ts
+*/
+var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"sms:",
+	"tel:"
+]);
+function sanitizeUrl(url) {
+	try {
+		const parsedUrl = new URL(url);
+		if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) return "about:blank";
+	} catch {
+		return url;
+	}
+	return url;
+}
+var urlRegExp = /* @__PURE__ */ new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-]*)?\??(?:[-+=&;%@.\w]*)#?(?:\w*))?)/);
+function validateUrl(url) {
+	return url === "https://" || urlRegExp.test(url);
+}
+//#endregion
+export { sanitizeUrl, validateUrl };
+
+//# sourceMappingURL=url.js.map

package/dist/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.js","names":[],"sources":["../../src/utils/url.ts"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * Source: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/utils/url.ts\n */\n\nconst SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', 'tel:']);\n\nexport function sanitizeUrl(url: string): string {\n  try {\n    const parsedUrl = new URL(url);\n    // eslint-disable-next-line no-script-url\n    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {\n      return 'about:blank';\n    }\n  } catch {\n    return url;\n  }\n  return url;\n}\n\n// Source: https://stackoverflow.com/a/8234912/2013580\nconst urlRegExp = new RegExp(\n  /((([A-Za-z]{3,9}:(?:\\/\\/)?)(?:[-;:&=+$,\\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\\w]+@)[A-Za-z0-9.-]+)((?:\\/[+~%/.\\w-]*)?\\??(?:[-+=&;%@.\\w]*)#?(?:\\w*))?)/\n);\nexport function validateUrl(url: string): boolean {\n  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.\n  // Maybe show a dialog where they user can type the URL before inserting it.\n  return url === 'https://' || urlRegExp.test(url);\n}\n"],"mappings":";;;;;;;;;AASA,IAAM,0CAA0B,IAAI,IAAI;CAAC;CAAS;CAAU;CAAW;CAAQ;AAAM,CAAC;AAEtF,SAAgB,YAAY,KAAqB;CAC/C,IAAI;EACF,MAAM,YAAY,IAAI,IAAI,GAAG;EAE7B,IAAI,CAAC,wBAAwB,IAAI,UAAU,QAAQ,GACjD,OAAO;CAEX,QAAQ;EACN,OAAO;CACT;CACA,OAAO;AACT;AAGA,IAAM,4BAAY,IAAI,OACpB,wJACF;AACA,SAAgB,YAAY,KAAsB;CAGhD,OAAO,QAAQ,cAAc,UAAU,KAAK,GAAG;AACjD"}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,66 +1,83 @@
 {
   "name": "@eventuras/scribo",
-  "version": "0.8.3",
+  "version": "0.10.7",
+  "description": "Markdown editor built on Lexical — WYSIWYG editing with markdown export",
+  "license": "MIT",
+  "homepage": "https://scribo.losol.no/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/losol/eventuras.git",
-    "directory": "libs/scribo"
+    "url": "https://github.com/losol/scribo.git"
+  },
+  "bugs": {
+    "url": "https://github.com/losol/scribo/issues"
   },
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/main.d.ts",
-      "import": "./dist/main.js"
+      "default": "./src/main.tsx"
+    },
+    "./plugins/schedule": {
+      "types": "./dist/nodes/schedule/index.d.ts",
+      "default": "./src/nodes/schedule/index.ts"
+    },
+    "./plugins/callout": {
+      "types": "./dist/nodes/callout/index.d.ts",
+      "default": "./src/nodes/callout/index.ts"
     },
     "./style.css": "./dist/scribo.css"
   },
   "main": "src/main.tsx",
-  "scripts": {
-    "build": "vite build",
-    "build:site": "vite build --config vite.config.site.ts",
-    "dev": "vite"
-  },
   "overrides": {
     "vite": {
       "rollup": "npm:@rollup/wasm-node"
     }
   },
   "dependencies": {
-    "@lexical/code": "0.35.0",
-    "@lexical/hashtag": "0.35.0",
-    "@lexical/link": "0.35.0",
-    "@lexical/list": "0.35.0",
-    "@lexical/mark": "0.35.0",
-    "@lexical/markdown": "0.35.0",
-    "@lexical/overflow": "0.35.0",
-    "@lexical/react": "^0.35.0",
-    "@lexical/rich-text": "0.35.0",
-    "@lexical/selection": "0.35.0",
-    "@lexical/table": "0.35.0",
-    "@lexical/utils": "0.35.0",
-    "lexical": "0.35.0",
+    "@lexical/code": "0.50.0",
+    "@lexical/hashtag": "0.50.0",
+    "@lexical/link": "0.50.0",
+    "@lexical/list": "0.50.0",
+    "@lexical/mark": "0.50.0",
+    "@lexical/markdown": "0.50.0",
+    "@lexical/overflow": "0.50.0",
+    "@lexical/react": "^0.50.0",
+    "@lexical/rich-text": "0.50.0",
+    "@lexical/selection": "0.50.0",
+    "@lexical/table": "0.50.0",
+    "@lexical/utils": "0.50.0",
+    "lexical": "0.50.0",
     "prismjs": "^1.30.0",
-    "yjs": "^13.6.29"
+    "yjs": "^13.6.32"
   },
   "devDependencies": {
-    "@eventuras/eslint-config": "workspace:*",
-    "@eventuras/typescript-config": "workspace:*",
-    "@eventuras/vite-config": "workspace:*",
+    "@biomejs/biome": "^2.5.14",
+    "@eventuras/typescript-config": "^1.0.0",
+    "@eventuras/vite-config": "^0.3.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "lightningcss": "^1.31.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.5",
+    "lightningcss": "^1.33.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.1"
   },
   "peerDependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
-  "packageManager": "pnpm@10.28.1",
   "engines": {
-    "node": ">=22.0.0 <25.0.0"
+    "node": ">=24.0.0 <25.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:site": "vite build --config vite.config.site.ts",
+    "dev": "vite",
+    "lint": "biome check .",
+    "test": "vitest run",
+    "format": "biome format --write .",
+    "format:check": "biome format --check ."
   }
-}
+}

package/src/MarkdownEditor.css

@@ -13,14 +13,14 @@
 .editor-shell {
   margin: 10px auto;
   border-radius: 2px;
-  /*max-width: 1100px;*/
   color: #000;
   position: relative;
   line-height: 1.7;
   font-weight: 400;
 }
 
-[data-theme="dark"] .editor-shell {
+[data-theme="dark"] .editor-shell,
+[data-color-scheme="dark"] .editor-shell {
   color: #e5e5e5;
 }
 
@@ -32,7 +32,8 @@
   border-bottom-right-radius: 10px;
 }
 
-[data-theme="dark"] .editor-shell .editor-container {
+[data-theme="dark"] .editor-shell .editor-container,
+[data-color-scheme="dark"] .editor-shell .editor-container {
   background: rgba(255, 255, 255, 0.05);
 }
 
@@ -112,17 +113,18 @@
   border-left: 3px solid #ddd;
 }
 
-[data-theme="dark"] .editor blockquote {
+[data-theme="dark"] .editor blockquote,
+[data-color-scheme="dark"] .editor blockquote {
   border-left-color: #555;
 }
 
-ul {
+.editor ul {
   list-style-type: disc;
   padding: 10px 0 !important;
   padding-left: 20px !important;
 }
 
-pre {
+.editor-shell pre {
   line-height: 1.1;
   background: #222;
   color: #fff;
@@ -133,12 +135,12 @@ pre {
   max-height: 400px;
 }
 
-pre::-webkit-scrollbar {
+.editor-shell pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
 }
 
-pre::-webkit-scrollbar-thumb {
+.editor-shell pre::-webkit-scrollbar-thumb {
   background: #999;
 }
 
@@ -204,7 +206,9 @@ i.redo {
 }
 
 [data-theme="dark"] .link-editor .button.active,
-[data-theme="dark"] .toolbar .button.active {
+[data-color-scheme="dark"] .link-editor .button.active,
+[data-theme="dark"] .toolbar .button.active,
+[data-color-scheme="dark"] .toolbar .button.active {
   background-color: rgba(100, 150, 255, 0.3);
 }
 
@@ -224,8 +228,9 @@ i.redo {
   font-family: inherit;
 }
 
-[data-theme="dark"] .link-editor .link-input {
-  background-color: rgba(255, 255, 255, 0.1);
+[data-theme="dark"] .link-editor .link-input,
+[data-color-scheme="dark"] .link-editor .link-input {
+  background-color: #303030;
   color: #e5e5e5;
 }
 
@@ -365,7 +370,8 @@ i.redo {
   background-color: #fff;
 }
 
-[data-theme="dark"] .dropdown {
+[data-theme="dark"] .dropdown,
+[data-color-scheme="dark"] .dropdown {
   background-color: rgba(30, 30, 30, 0.95);
   box-shadow:
     0 12px 28px 0 rgba(0, 0, 0, 0.6),
@@ -392,7 +398,8 @@ i.redo {
   min-width: 100px;
 }
 
-[data-theme="dark"] .dropdown .item {
+[data-theme="dark"] .dropdown .item,
+[data-color-scheme="dark"] .dropdown .item {
   color: #e5e5e5;
   background-color: transparent;
 }
@@ -421,7 +428,8 @@ i.redo {
   background-color: #eee;
 }
 
-[data-theme="dark"] .dropdown .item:hover {
+[data-theme="dark"] .dropdown .item:hover,
+[data-color-scheme="dark"] .dropdown .item:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -444,7 +452,8 @@ i.redo {
   background-repeat: no-repeat;
 }
 
-[data-theme="dark"] .dropdown .item .icon {
+[data-theme="dark"] .dropdown .item .icon,
+[data-color-scheme="dark"] .dropdown .item .icon {
   filter: invert(1);
 }
 
@@ -455,7 +464,8 @@ i.redo {
   height: 1px;
 }
 
-[data-theme="dark"] .dropdown .divider {
+[data-theme="dark"] .dropdown .divider,
+[data-color-scheme="dark"] .dropdown .divider {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
@@ -511,6 +521,14 @@ i.redo {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-code'%3E%3Cpath d='M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z'/%3E%3C/svg%3E");
 }
 
+.icon.schedule {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 7.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
+}
+
+.icon.alert {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
+}
+
 .switches {
   z-index: 6;
   position: fixed;
@@ -852,15 +870,14 @@ i.redo {
 }
 
 .table-cell-action-button {
-  background-color: none;
-  display: flex;
+  background-color: transparent;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   border: 0;
   position: relative;
   border-radius: 15px;
   color: #222;
-  display: inline-block;
   cursor: pointer;
 }
 
@@ -885,8 +902,9 @@ i.chevron-down {
   cursor: pointer;
 }
 
-[data-theme="dark"] .action-button {
-  background-color: rgba(255, 255, 255, 0.1);
+[data-theme="dark"] .action-button,
+[data-color-scheme="dark"] .action-button {
+  background-color: #303030;
   color: #e5e5e5;
 }
 
@@ -895,8 +913,9 @@ i.chevron-down {
   color: #000;
 }
 
-[data-theme="dark"] .action-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+[data-theme="dark"] .action-button:hover,
+[data-color-scheme="dark"] .action-button:hover {
+  background-color: #474747;
   color: #fff;
 }
 
@@ -906,7 +925,8 @@ button.action-button:disabled {
   cursor: not-allowed;
 }
 
-[data-theme="dark"] button.action-button:disabled {
+[data-theme="dark"] button.action-button:disabled,
+[data-color-scheme="dark"] button.action-button:disabled {
   background: rgba(255, 255, 255, 0.05);
 }
 
@@ -933,7 +953,8 @@ button.action-button:disabled {
   z-index: 2;
 }
 
-[data-theme="dark"] .toolbar {
+[data-theme="dark"] .toolbar,
+[data-color-scheme="dark"] .toolbar {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -960,15 +981,15 @@ button.toolbar-item.spaced {
 
 button.toolbar-item i.format {
   background-size: contain;
-  display: inline-block;
+  display: flex;
   height: 18px;
   width: 18px;
   vertical-align: -0.25em;
-  display: flex;
   opacity: 0.6;
 }
 
-[data-theme="dark"] button.toolbar-item i.format {
+[data-theme="dark"] button.toolbar-item i.format,
+[data-color-scheme="dark"] button.toolbar-item i.format {
   filter: invert(1);
 }
 
@@ -991,7 +1012,8 @@ button.toolbar-item.active i {
   background-color: #eee;
 }
 
-[data-theme="dark"] .toolbar-item:hover:not([disabled]) {
+[data-theme="dark"] .toolbar-item:hover:not([disabled]),
+[data-color-scheme="dark"] .toolbar-item:hover:not([disabled]) {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -1017,7 +1039,8 @@ button.toolbar-item.active i {
   padding-right: 10px;
 }
 
-[data-theme="dark"] .toolbar .toolbar-item .text {
+[data-theme="dark"] .toolbar .toolbar-item .text,
+[data-color-scheme="dark"] .toolbar .toolbar-item .text {
   color: #bbb;
 }
 
@@ -1031,7 +1054,8 @@ button.toolbar-item.active i {
   background-size: contain;
 }
 
-[data-theme="dark"] .toolbar .toolbar-item .icon {
+[data-theme="dark"] .toolbar .toolbar-item .icon,
+[data-color-scheme="dark"] .toolbar .toolbar-item .icon {
   filter: invert(1);
 }
 
@@ -1045,7 +1069,9 @@ button.toolbar-item.active i {
 }
 
 [data-theme="dark"] .toolbar i.chevron-down,
-[data-theme="dark"] .toolbar-item i.chevron-down {
+[data-color-scheme="dark"] .toolbar i.chevron-down,
+[data-theme="dark"] .toolbar-item i.chevron-down,
+[data-color-scheme="dark"] .toolbar-item i.chevron-down {
   filter: invert(1);
 }
 
@@ -1080,7 +1106,7 @@ button.toolbar-item.active i {
   padding: 20px 10px;
   position: relative;
   border: 1px solid #e8e8e8;
-  font-family: "Reenie Beanie";
+  font-family: "Reenie Beanie", cursive;
   font-size: 24px;
   border-bottom-right-radius: 60px 5px;
   display: block;
@@ -1102,24 +1128,12 @@ button.toolbar-item.active i {
 
 .sticky-note.yellow {
   border-top: 1px solid #fdfd86;
-  background: linear-gradient(
-    135deg,
-    #ffff88 81%,
-    #ffff88 82%,
-    #ffff88 82%,
-    #ffffc6 100%
-  );
+  background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
 }
 
 .sticky-note.pink {
   border-top: 1px solid #e7d1e4;
-  background: linear-gradient(
-    135deg,
-    #f7cbe8 81%,
-    #f7cbe8 82%,
-    #f7cbe8 82%,
-    #e7bfe1 100%
-  );
+  background: linear-gradient(135deg, #f7cbe8 81%, #f7cbe8 82%, #f7cbe8 82%, #e7bfe1 100%);
 }
 
 .sticky-note-container.dragging {

package/src/MarkdownEditor.tsx

@@ -2,26 +2,26 @@ import {
   $convertFromMarkdownString,
   $convertToMarkdownString,
   TRANSFORMERS,
-} from "@lexical/markdown";
-import { $getRoot } from 'lexical';
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { EditorState } from "lexical";
-import React, { useState } from "react";
-
-import EditorNodes from "./nodes/EditorNodes";
-import ToolbarPlugin from "./plugins/ToolbarPlugin";
-import EditorTheme from "./themes/EditorTheme";
-import ContentEditable from "./ui/ContentEditable";
-import Placeholder from "./ui/Placeholder";
+} from '@lexical/markdown';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
-import LinkPlugin from "./plugins/LinkPlugin";
-import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
-import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { $createParagraphNode, $createTextNode, $getRoot, type EditorState } from 'lexical';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
+import EditorNodes from './nodes/EditorNodes';
+import AutoLinkPlugin from './plugins/AutoLinkPlugin';
+import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
+import LinkPlugin from './plugins/LinkPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import EditorTheme from './themes/EditorTheme';
+import type { ScriboPlugin } from './types';
+import ContentEditable from './ui/ContentEditable';
+import Placeholder from './ui/Placeholder';
 
 export type onChangeMisc = {
   plainText: string;
@@ -29,6 +29,7 @@ export type onChangeMisc = {
 export interface MarkdownEditorProps {
   initialMarkdown?: string;
   className?: string;
+  plugins?: ScriboPlugin[];
   onChange?: (markdown: string, misc: onChangeMisc) => void;
   onBlur?: () => void;
   placeholder?: string;
@@ -40,8 +41,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
   const { historyState } = useSharedHistoryContext();
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
 
-  const [floatingAnchorElem, setFloatingAnchorElem] =
-    useState<HTMLDivElement | undefined>(undefined);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | undefined>(
+    undefined
+  );
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
     if (_floatingAnchorElem !== null) {
@@ -49,17 +51,35 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
     }
   };
 
+  // Collect nodes and transformers from plugins
+  const pluginNodes = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.nodes ?? []),
+    [props.plugins]
+  );
+  const allTransformers = useMemo(
+    () => [...(props.plugins ?? []).flatMap((p) => p.transformers ?? []), ...TRANSFORMERS],
+    [props.plugins]
+  );
+  const toolbarButtons = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.toolbarButtons ?? []),
+    [props.plugins]
+  );
+  const editorPlugins = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.editorPlugins ?? []),
+    [props.plugins]
+  );
+
   const internalOnChange = (editorState: EditorState) => {
     editorState.read(() => {
-      const markdown = $convertToMarkdownString(TRANSFORMERS);
+      const markdown = $convertToMarkdownString(allTransformers);
       const plainText = $getRoot().getTextContent();
-      props.onChange && props.onChange(markdown, { plainText });
+      props.onChange?.(markdown, { plainText });
     });
   };
 
   const initialConfig = {
-    namespace: "ScriboMarkdown",
-    nodes: [...EditorNodes],
+    namespace: 'ScriboMarkdown',
+    nodes: [...EditorNodes, ...pluginNodes],
     onError: (error: Error) => {
       throw error;
     },
@@ -67,8 +87,23 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
     editorState: props.initialMarkdown
       ? () => {
           // Unescape backslash-escaped markdown characters
-          const unescapedMarkdown = props.initialMarkdown!.replace(/\\([*_`\[\]()#+-])/g, '$1');
-          $convertFromMarkdownString(unescapedMarkdown, TRANSFORMERS);
+          const unescapedMarkdown = (props.initialMarkdown ?? '').replaceAll(
+            /\\([*_`[\]()#+-])/g,
+            '$1'
+          );
+          try {
+            $convertFromMarkdownString(unescapedMarkdown, allTransformers);
+          } catch (err) {
+            // Markdown parsing threw (e.g. a transformer bug). Fall back to plain
+            // text so the field stays editable and content isn't lost — better
+            // than crashing the whole tree and propagating to the page boundary.
+            console.error('Scribo: markdown parse failed, falling back to plain text', err);
+            const root = $getRoot();
+            root.clear();
+            const paragraph = $createParagraphNode();
+            paragraph.append($createTextNode(unescapedMarkdown));
+            root.append(paragraph);
+          }
         }
       : undefined,
   };
@@ -76,11 +111,16 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
   return (
     <div className={props.className}>
       <LexicalComposer initialConfig={initialConfig}>
-        <div className="editor-shell" onBlur={props.onBlur} data-testid={props['data-testid']} id={props.id}>
-          <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+        <div
+          className="editor-shell"
+          onBlur={props.onBlur}
+          data-testid={props['data-testid']}
+          id={props.id}
+        >
+          <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} toolbarButtons={toolbarButtons} />
           <div className="editor-container rich-text">
             <HistoryPlugin externalHistoryState={historyState} />
-            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+            <MarkdownShortcutPlugin transformers={allTransformers} />
             <AutoLinkPlugin />
             <LinkPlugin />
             <FloatingLinkEditorPlugin
@@ -91,7 +131,11 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
             <RichTextPlugin
               contentEditable={
                 <div className="editor-scroller">
-                  <div className="editor" ref={onRef} id={props.id ? `${props.id}-editable` : undefined}>
+                  <div
+                    className="editor"
+                    ref={onRef}
+                    id={props.id ? `${props.id}-editable` : undefined}
+                  >
                     <ContentEditable />
                   </div>
                 </div>
@@ -101,6 +145,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
             />
           </div>
           {props.onChange && <OnChangePlugin onChange={internalOnChange} />}
+          {editorPlugins.map((Plugin) => (
+            <Plugin key={Plugin.displayName ?? Plugin.name} />
+          ))}
         </div>
       </LexicalComposer>
     </div>