xmlui 0.9.78 → 0.9.79

package/dist/scripts/bin/build.js

@@ -145,7 +145,11 @@ const build = (_a) => __awaiter(void 0, [_a], void 0, function* ({ buildMode = "
             "process.env.VITE_USED_COMPONENTS_Fragment": JSON.stringify(process.env.VITE_USED_COMPONENTS_Fragment),
             "process.env.VITE_USED_COMPONENTS_Table": JSON.stringify(process.env.VITE_USED_COMPONENTS_Table),
             "process.env.VITE_USED_COMPONENTS_List": JSON.stringify(process.env.VITE_USED_COMPONENTS_List),
-            "process.env.VITE_USED_COMPONENTS_DateRangePicker": JSON.stringify(process.env.VITE_USED_COMPONENTS_DateRangePicker),
+            "process.env.VITE_USED_COMPONENTS_XmluiCodeHightlighter": JSON.stringify(process.env.VITE_USED_COMPONENTS_XmluiCodeHightlighter),
+            "process.env.VITE_USED_COMPONENTS_HelloWorld": JSON.stringify(process.env.VITE_USED_COMPONENTS_HelloWorld),
+            "process.env.VITE_USED_COMPONENTS_Charts": JSON.stringify(process.env.VITE_USED_COMPONENTS_Charts),
+            "process.env.VITE_INCLUDE_HTML_COMPONENTS": JSON.stringify(process.env.VITE_INCLUDE_HTML_COMPONENTS),
+            "process.env.VITE_USED_COMPONENTS_TableEditor": JSON.stringify(process.env.VITE_USED_COMPONENTS_TableEditor),
             "process.env.VITE_USED_COMPONENTS_DatePicker": JSON.stringify(process.env.VITE_USED_COMPONENTS_DatePicker),
             "process.env.VITE_USED_COMPONENTS_NavPanel": JSON.stringify(process.env.VITE_USED_COMPONENTS_NavPanel),
             "process.env.VITE_USED_COMPONENTS_Pages": JSON.stringify(process.env.VITE_USED_COMPONENTS_Pages),
@@ -162,6 +166,7 @@ const build = (_a) => __awaiter(void 0, [_a], void 0, function* ({ buildMode = "
             "process.env.VITE_USED_COMPONENTS_Items": JSON.stringify(process.env.VITE_USED_COMPONENTS_Items),
             "process.env.VITE_USED_COMPONENTS_SelectionStore": JSON.stringify(process.env.VITE_USED_COMPONENTS_SelectionStore),
             "process.env.VITE_INCLUDE_REST_COMPONENTS": JSON.stringify(process.env.VITE_INCLUDE_REST_COMPONENTS),
+            "process.env.VITE_USED_COMPONENTS_EmojiSelector": JSON.stringify(process.env.VITE_USED_COMPONENTS_EmojiSelector),
         } }));
     if (buildMode === "INLINE_ALL") {
         return;

package/dist/scripts/bin/index.js

@@ -34,8 +34,8 @@ function zipDirectory(sourceDir_1) {
     });
 }
 function zipDist(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ target = "ui.zip" }) {
-        yield zipDirectory(process.cwd() + "/dist", `${process.cwd()}/${target}`);
+    return __awaiter(this, arguments, void 0, function* ({ target = "ui.zip", source = "dist" }) {
+        yield zipDirectory(`${process.cwd()}/${source}`, `${process.cwd()}/${target}`);
     });
 }
 function dedupeArg(arg) {
@@ -84,8 +84,8 @@ switch (script) {
         break;
     }
     case "zip-dist": {
-        const { target } = yargs_1.argv;
-        zipDist({ target });
+        const { target, source } = yargs_1.argv;
+        zipDist({ target, source });
         break;
     }
     default: {

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.78",
+    "version": "0.9.79",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/ComponentProvider.js

@@ -377,6 +377,12 @@ class ComponentRegistry {
             this.registerCoreComponent(LineChart_1.lineChartComponentRenderer);
             this.registerCoreComponent(PieChart_1.pieChartComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_EmojiSelector !== "false") {
+            this.registerCoreComponent(EmojiSelector_1.emojiSelectorRenderer);
+        }
+        if (process.env.VITE_USED_COMPONENTS_DatePicker !== "false") {
+            this.registerCoreComponent(DatePicker_1.datePickerComponentRenderer);
+        }
         if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
             //TODO, if it proves to be a working solution, make these components skippable, too
             this.registerCoreComponent(PageMetaTitle_1.pageMetaTitleComponentRenderer);
@@ -390,13 +396,11 @@ class ComponentRegistry {
             this.registerCoreComponent(RealTimeAdapter_1.realTimeAdapterComponentRenderer);
             this.registerCoreComponent(TextBox_1.textBoxComponentRenderer);
             this.registerCoreComponent(TextBox_1.passwordInputComponentRenderer);
-            this.registerCoreComponent(EmojiSelector_1.emojiSelectorRenderer);
             this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
             this.registerCoreComponent(NumberBox2_1.numberBox2ComponentRenderer);
             this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
             this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
             this.registerCoreComponent(FileInput_1.fileInputRenderer);
-            this.registerCoreComponent(DatePicker_1.datePickerComponentRenderer);
             this.registerCoreComponent(Spinner_1.spinnerComponentRenderer);
             this.registerCoreComponent(Select_1.selectComponentRenderer);
             this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);

package/dist/scripts/src/components/EmojiSelector/DefaultProps.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
+const constants_1 = require("../../components-core/constants");
+exports.defaultProps = {
+    theme: "light",
+    select: constants_1.noop,
+    autoFocus: false,
+};

package/dist/scripts/src/components/EmojiSelector/EmojiSelector.js

@@ -6,13 +6,14 @@ const renderers_1 = require("../../components-core/renderers");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
+const DefaultProps_1 = require("./DefaultProps");
 const COMP = "EmojiSelector";
 exports.EmojiSelectorMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`EmojiSelector` enables users to browse, search and select emojis from " +
         "their system's native emoji set.",
     props: {
-        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: EmojiSelectorNative_1.defaultProps.autoFocus }),
+        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: DefaultProps_1.defaultProps.autoFocus }),
     },
     events: {
         select: (0, metadata_helpers_1.d)(`This event is fired when the user selects an emoticon from this component.`),

package/dist/scripts/src/components/EmojiSelector/EmojiSelectorNative.js

@@ -42,16 +42,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiSelector = exports.defaultProps = void 0;
+exports.EmojiSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const emoji_picker_react_1 = __importStar(require("emoji-picker-react"));
-const constants_1 = require("../../components-core/constants");
-exports.defaultProps = {
-    theme: emoji_picker_react_1.Theme.LIGHT,
-    select: constants_1.noop,
-    autoFocus: false,
-};
-const EmojiSelector = ({ select = exports.defaultProps.select, theme = exports.defaultProps.theme, autoFocus = exports.defaultProps.autoFocus, }) => ((0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
+const DefaultProps_1 = require("./DefaultProps");
+// =====================================================================================================================
+// React EmojiSelector component implementation
+const EmojiSelector = ({ select = DefaultProps_1.defaultProps.select, theme = DefaultProps_1.defaultProps.theme, autoFocus = DefaultProps_1.defaultProps.autoFocus, }) => ((0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { autoFocusSearch: autoFocus, onEmojiClick: (emojiObject) => __awaiter(void 0, void 0, void 0, function* () {
         yield select(emojiObject.emoji);
     }), lazyLoadEmojis: true, theme: theme, previewConfig: { showPreview: false }, skinTonesDisabled: true, height: 360, emojiStyle: emoji_picker_react_1.EmojiStyle.NATIVE }));
 exports.EmojiSelector = EmojiSelector;

package/dist/scripts/src/components/TableEditor/TableEditor.js

@@ -1,145 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.editorComponentRenderer = exports.TableEditorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@tiptap/react");
-const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
-const extension_table_1 = __importDefault(require("@tiptap/extension-table"));
-const extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
-const extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
-const extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
-const ButtonNative_1 = require("../Button/ButtonNative");
-const StackNative_1 = require("../Stack/StackNative");
-const TableEditorNative_1 = require("./TableEditorNative");
-const turndown_1 = __importDefault(require("turndown"));
 const metadata_helpers_1 = require("../metadata-helpers");
 const renderers_1 = require("../../components-core/renderers");
 const abstractions_1 = require("../abstractions");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const TableEditor_module_scss_1 = __importDefault(require("./TableEditor.module.scss"));
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const TableEditor = (0, react_1.forwardRef)(function TableEditor({ registerComponentApi, themeColor = "primary", variant = "solid", size = "sm", onDidChange = () => { }, }, ref) {
-    const editor = (0, react_2.useEditor)({
-        extensions: [
-            starter_kit_1.default,
-            extension_table_1.default.configure({ resizable: true }),
-            extension_table_row_1.default,
-            extension_table_header_1.default,
-            extension_table_cell_1.default,
-        ],
-        content: `
-      <table>
-        <thead>
-          <tr>
-            <th>Fruit</th>
-            <th>Color</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Apple</td>
-            <td>Red</td>
-          </tr>
-          <tr>
-            <td>Banana</td>
-            <td>Yellow</td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-    });
-    const turndownService = new turndown_1.default();
-    turndownService.addRule("table", {
-        filter: "table",
-        replacement: function (content, node) {
-            let rows = [];
-            for (let row of node.querySelectorAll("tr")) {
-                let cells = Array.from(row.children).map((cell) => { var _a, _b; return (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ""; });
-                rows.push("| " + cells.join(" | ") + " |");
-            }
-            if (rows.length > 1) {
-                // Add a separator after the header row
-                const headerSep = "| " +
-                    rows[0]
-                        .split("|")
-                        .slice(1, -1)
-                        .map(() => "---")
-                        .join(" | ") +
-                    " |";
-                rows.splice(1, 0, headerSep);
-            }
-            return rows.join("\n") + "\n";
-        },
-    });
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        getMarkdownSource: () => { var _a, _b; return turndownService.turndown((_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""); },
-        getHtmlSource: () => { var _a, _b; return (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""; },
-    }), [editor]);
-    react_1.default.useEffect(() => {
-        if (registerComponentApi && editor) {
-            registerComponentApi({
-                getHtmlSource: () => editor.getHTML(),
-                getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
-            });
-        }
-    }, [registerComponentApi, editor]);
-    // Emit onDidChange whenever the editor content changes
-    react_1.default.useEffect(() => {
-        if (!editor)
-            return;
-        const handler = () => {
-            const html = editor.getHTML();
-            const markdown = turndownService.turndown(html);
-            //console.log("[TableEditor] onDidChange about to fire", { html, markdown, onDidChange });
-            onDidChange({ html, markdown });
-        };
-        editor.on("update", handler);
-        // Emit once on mount
-        handler();
-        return () => {
-            editor.off("update", handler);
-        };
-    }, [editor, onDidChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "table-editor-root", children: [(0, jsx_runtime_1.jsx)("div", { className: "button-stack", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addRowAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-row", "aria-hidden": true }), children: "Insert Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteRow(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-row", "aria-hidden": true }), children: "Delete Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addColumnAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-column", "aria-hidden": true }), children: "Insert Column" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteColumn(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-column", "aria-hidden": true }), children: "Delete Column" })] }) }), (0, jsx_runtime_1.jsx)(TableEditorNative_1.TableEditorNative, { editor: editor, className: TableEditor_module_scss_1.default.editor })] }));
-});
-exports.default = TableEditor;
+const TableEditorNative_1 = require("./TableEditorNative");
 // Create metadata for TableEditor that defines allowed props
 exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -178,6 +49,5 @@ exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.editorComponentRenderer = (0, renderers_1.createComponentRenderer)("TableEditor", exports.TableEditorMd, ({ node, extractValue, registerComponentApi, lookupEventHandler }) => {
     const handler = lookupEventHandler === null || lookupEventHandler === void 0 ? void 0 : lookupEventHandler("didChange");
-    //console.log("[TableEditor renderer] didChange handler:", handler);
-    return ((0, jsx_runtime_1.jsx)(TableEditor, { themeColor: extractValue.asOptionalString(node.props.themeColor), variant: extractValue.asOptionalString(node.props.variant), size: extractValue.asOptionalString(node.props.size), registerComponentApi: registerComponentApi, onDidChange: handler }));
+    return ((0, jsx_runtime_1.jsx)(TableEditorNative_1.TableEditor, { themeColor: extractValue.asOptionalString(node.props.themeColor), variant: extractValue.asOptionalString(node.props.variant), size: extractValue.asOptionalString(node.props.size), registerComponentApi: registerComponentApi, onDidChange: handler }));
 });

package/dist/scripts/src/components/TableEditor/TableEditorNative.js

@@ -1,8 +1,136 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableEditorNative = TableEditorNative;
+exports.TableEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@tiptap/react");
-function TableEditorNative({ editor, className }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(react_1.EditorContent, { editor: editor }) }));
-}
+const react_1 = __importStar(require("react"));
+const react_2 = require("@tiptap/react");
+const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
+const extension_table_1 = __importDefault(require("@tiptap/extension-table"));
+const extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
+const extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
+const extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
+const ButtonNative_1 = require("../Button/ButtonNative");
+const StackNative_1 = require("../Stack/StackNative");
+const turndown_1 = __importDefault(require("turndown"));
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const TableEditor_module_scss_1 = __importDefault(require("./TableEditor.module.scss"));
+exports.TableEditor = (0, react_1.forwardRef)(function TableEditor({ registerComponentApi, themeColor = "primary", variant = "solid", size = "sm", onDidChange = () => { }, }, ref) {
+    const editor = (0, react_2.useEditor)({
+        extensions: [
+            starter_kit_1.default,
+            extension_table_1.default.configure({ resizable: true }),
+            extension_table_row_1.default,
+            extension_table_header_1.default,
+            extension_table_cell_1.default,
+        ],
+        content: `
+      <table>
+        <thead>
+          <tr>
+            <th>Fruit</th>
+            <th>Color</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Apple</td>
+            <td>Red</td>
+          </tr>
+          <tr>
+            <td>Banana</td>
+            <td>Yellow</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    });
+    const turndownService = new turndown_1.default();
+    turndownService.addRule("table", {
+        filter: "table",
+        replacement: function (content, node) {
+            let rows = [];
+            for (let row of node.querySelectorAll("tr")) {
+                let cells = Array.from(row.children).map((cell) => { var _a, _b; return (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ""; });
+                rows.push("| " + cells.join(" | ") + " |");
+            }
+            if (rows.length > 1) {
+                // Add a separator after the header row
+                const headerSep = "| " +
+                    rows[0]
+                        .split("|")
+                        .slice(1, -1)
+                        .map(() => "---")
+                        .join(" | ") +
+                    " |";
+                rows.splice(1, 0, headerSep);
+            }
+            return rows.join("\n") + "\n";
+        },
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getMarkdownSource: () => { var _a, _b; return turndownService.turndown((_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""); },
+        getHtmlSource: () => { var _a, _b; return (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""; },
+    }), [editor]);
+    react_1.default.useEffect(() => {
+        if (registerComponentApi && editor) {
+            registerComponentApi({
+                getHtmlSource: () => editor.getHTML(),
+                getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
+            });
+        }
+    }, [registerComponentApi, editor]);
+    // Emit onDidChange whenever the editor content changes
+    react_1.default.useEffect(() => {
+        if (!editor)
+            return;
+        const handler = () => {
+            const html = editor.getHTML();
+            const markdown = turndownService.turndown(html);
+            //console.log("[TableEditor] onDidChange about to fire", { html, markdown, onDidChange });
+            onDidChange({ html, markdown });
+        };
+        editor.on("update", handler);
+        // Emit once on mount
+        handler();
+        return () => {
+            editor.off("update", handler);
+        };
+    }, [editor, onDidChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "table-editor-root", children: [(0, jsx_runtime_1.jsx)("div", { className: "button-stack", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addRowAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-row", "aria-hidden": true }), children: "Insert Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteRow(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-row", "aria-hidden": true }), children: "Delete Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addColumnAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-column", "aria-hidden": true }), children: "Insert Column" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteColumn(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-column", "aria-hidden": true }), children: "Delete Column" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: TableEditor_module_scss_1.default.editor, children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) })] }));
+});