xmlui 0.9.63 → 0.9.65

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

@@ -0,0 +1,183 @@
+"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;
+// Create metadata for TableEditor that defines allowed props
+exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
+    description: "`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
+    status: "stable",
+    props: {
+        themeColor: {
+            description: "Sets the color scheme for all editor buttons.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.buttonThemeMd,
+            defaultValue: "primary",
+        },
+        variant: {
+            description: "Sets the visual style for all editor buttons.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.buttonVariantMd,
+            defaultValue: "solid",
+        },
+        size: {
+            description: "Sets the size for all editor buttons.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.sizeMd,
+            defaultValue: "sm",
+        },
+    },
+    events: {
+        didChange: {
+            description: "Fired whenever the table content changes. Payload: { html, markdown }.",
+            isRequired: false,
+            type: "function",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(TableEditor_module_scss_1.default.themeVars),
+});
+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 }));
+});

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableEditorNative = TableEditorNative;
+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 }) }));
+}

package/dist/scripts/src/parsers/xmlui-parser/transform.js

@@ -48,13 +48,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         }
         let component = {
             type: name,
-            debug: {
-                source: {
-                    start: node.start,
-                    end: node.end,
-                    fileId,
-                },
-            },
         };
         // --- Done
         collectTraits(usesStack, component, node);
@@ -67,13 +60,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         }
         let component = {
             type: name,
-            debug: {
-                source: {
-                    start: node.start,
-                    end: node.end,
-                    fileId,
-                },
-            },
         };
         // --- Done
         collectTraits(usesStack, component, node);
@@ -147,13 +133,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         const component = {
             name: compoundName.value,
             component: nestedComponent,
-            debug: {
-                source: {
-                    start: node.start,
-                    end: node.end,
-                    fileId,
-                },
-            },
         };
         if (api) {
             component.api = api;
@@ -164,13 +143,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         if (codeBehind) {
             component.codeBehind = codeBehind.value;
         }
-        nestedComponent.debug = {
-            source: {
-                start: element.start,
-                end: element.end,
-                fileId,
-            },
-        };
         const nodeClone = withNewChildNodes(node, nonVarHelperNodes);
         collectTraits(usesStack, component, nodeClone);
         return component;
@@ -1041,7 +1013,6 @@ function desugarKeyOnlyAttrs(attrs) {
     }
 }
 function addToNamespaces(namespaceStack, comp, nsKey, value) {
-    var _a;
     let nsCommaSeparated = value.split(":");
     if (nsCommaSeparated.length > 2) {
         return reportError("T028", value, "Namespace cannot contain multiple ':' (colon).");
@@ -1072,8 +1043,6 @@ function addToNamespaces(namespaceStack, comp, nsKey, value) {
         return reportError("T025", nsKey);
     }
     compNamespaces.set(nsKey, nsValue);
-    (_a = comp.namespaces) !== null && _a !== void 0 ? _a : (comp.namespaces = {});
-    comp.namespaces[nsKey] = nsValue;
 }
 function getTopLvlElement(node, getText) {
     // --- Check that the nodes contains exactly only a single component root element before the EoF token

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -326,19 +326,67 @@ declare interface ComponentDef<TMd extends ComponentMetadata = ComponentMetadata
     contextVars?: Record<keyof TMd["contextVars"], string>;
 }
 
+/**
+ * This interface represents the core properties of a component definition
+ * (independent of component metadata).
+ */
 declare interface ComponentDefCore {
+    /**
+     * The type discriminator field of the component; it defines the unique ID of the component type.
+     */
     type: string;
+    /**
+     * Unique identifier of a component-like object
+     */
     uid?: string;
+    /**
+     * An optional identifier we use for e2e tests; it does not influence the rendering of a component.
+     */
     testId?: string;
-    namespaces?: Record<string, string>;
+    /**
+     * Though components manage their state internally, the app logic may require user
+     * state management. Components may have user *variables*, which the UI logic uses to
+     * manage the application state. This property holds the variables (name and value
+     * pairs) associated with this component definition.
+     */
     vars?: Record<string, any>;
+    /**
+     * Each component may have child components to constitute a hierarchy of components.
+     * This property holds the definition of these nested children.
+     */
     children?: ComponentDef[];
+    /**
+     * Components may have slots that can be filled with other components. This property
+     * holds the contents of the slots.
+     */
     slots?: Record<string, ComponentDef[]>;
+    /**
+     * This property is evaluated to a Boolean value during run time. When this value is
+     * `true`, the component with its children chain is rendered; otherwise, the entire
+     * component hierarchy is omitted from the rendered tree.
+     */
     when?: string | boolean;
+    /**
+     * Some components work with data obtained asynchronously. Fetching this data requires
+     * some state management handling the complexity (including error handling) of data
+     * access. A *loader* is responsible for managing this logic. This property holds the
+     * loaders associated with this component definition.
+     */
     loaders?: ComponentDef[];
+    /**
+     * Components may have functions that are used to perform some logic. This property
+     * holds the functions (name and function body) associated with this component
+     * definition.
+     */
     functions?: Record<string, any>;
+    /**
+     * Components managing state through variables or loaders are wrapped with containers
+     * responsible for this job. Just as components, containers form a hierarchy. While
+     * working with this hierarchy, parent components may flow state values (key and value
+     * pairs) to their child containers. This property holds the name of state values to
+     * flow down to the direct child containers.
+     */
     uses?: string[];
-    debug?: Record<string, any>;
 }
 
 declare type ComponentExtension = ComponentRendererDef | CompoundComponentDef;
@@ -881,7 +929,7 @@ declare interface NavHierarchyNode {
     lastLink?: boolean;
 }
 
-declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, popOutUrl, withFrame, style, refVersion, }: NestedAppProps): JSX_2.Element;
+declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, popOutUrl, withFrame, noHeader, style, refVersion, }: NestedAppProps): JSX_2.Element;
 
 declare type NestedAppProps = {
     api?: any;
@@ -895,6 +943,7 @@ declare type NestedAppProps = {
     allowPlaygroundPopup?: boolean;
     popOutUrl?: string;
     withFrame?: boolean;
+    noHeader?: boolean;
     style?: CSSProperties;
     splitView?: boolean;
     refVersion?: number;