@a3s-lab/office 0.1.0

package/dist/web-component.js

@@ -0,0 +1,335 @@
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MarkdownEditor, PdfViewer, DocumentEditor, PresentationEditor, SpreadsheetEditor } from "./432.js";
+const HTMLElementBase = "u" < typeof HTMLElement ? class {
+} : HTMLElement;
+class A3SOfficeElement extends HTMLElementBase {
+    #root = null;
+    connectedCallback() {
+        this.renderReactTree();
+    }
+    disconnectedCallback() {
+        this.#root?.unmount();
+        this.#root = null;
+    }
+    attributeChangedCallback() {
+        this.renderReactTree();
+    }
+    requestRender() {
+        this.renderReactTree();
+    }
+    renderReactTree() {
+        if (!this.isConnected) return;
+        this.#root ??= createRoot(this);
+        this.#root.render(this.editorNode());
+    }
+}
+function themeFrom(element) {
+    const value = element.getAttribute('theme');
+    return 'dark' === value || 'light' === value ? value : 'system';
+}
+function missingContent(kind, theme) {
+    return /*#__PURE__*/ createElement('div', {
+        className: 'a3s-office a3s-office-empty',
+        'data-a3s-office': '',
+        'data-theme': theme,
+        role: 'status'
+    }, `Set the element's content property to a ${kind} content model.`);
+}
+function dispatchDetail(target, type, detail) {
+    target.dispatchEvent(new CustomEvent(type, {
+        bubbles: true,
+        composed: true,
+        detail
+    }));
+}
+class A3SContentEditorElement extends A3SOfficeElement {
+    #content;
+    #fileActions;
+    get content() {
+        return this.#content;
+    }
+    set content(value) {
+        this.#content = value;
+        this.requestRender();
+    }
+    get fileActions() {
+        return this.#fileActions;
+    }
+    set fileActions(value) {
+        this.#fileActions = value;
+        this.requestRender();
+    }
+    get preview() {
+        return this.hasAttribute('preview');
+    }
+    set preview(value) {
+        this.toggleAttribute('preview', value);
+    }
+    get saveStatus() {
+        return this.getAttribute('save-status') ?? void 0;
+    }
+    set saveStatus(value) {
+        if (void 0 === value) this.removeAttribute('save-status');
+        else this.setAttribute('save-status', value);
+    }
+    get theme() {
+        return themeFrom(this);
+    }
+    set theme(value) {
+        this.setAttribute('theme', value);
+    }
+    changeContent(value) {
+        this.#content = value;
+        dispatchDetail(this, 'change', value);
+        this.requestRender();
+    }
+    requestAgent(request) {
+        dispatchDetail(this, 'agent-request', request);
+    }
+}
+class A3SDocumentEditorElement extends A3SContentEditorElement {
+    #extensions;
+    #getSelectionMenuItems;
+    #layoutFonts;
+    static get observedAttributes() {
+        return [
+            'artifact-id',
+            'kernel-wasm-url',
+            'preview',
+            'save-status',
+            'theme'
+        ];
+    }
+    get artifactId() {
+        return this.getAttribute('artifact-id') ?? void 0;
+    }
+    set artifactId(value) {
+        if (void 0 === value) this.removeAttribute('artifact-id');
+        else this.setAttribute('artifact-id', value);
+    }
+    get kernelWasmUrl() {
+        return this.getAttribute('kernel-wasm-url') ?? void 0;
+    }
+    set kernelWasmUrl(value) {
+        if (void 0 === value) this.removeAttribute('kernel-wasm-url');
+        else this.setAttribute('kernel-wasm-url', value);
+    }
+    get extensions() {
+        return this.#extensions;
+    }
+    set extensions(value) {
+        this.#extensions = value;
+        this.requestRender();
+    }
+    get getSelectionMenuItems() {
+        return this.#getSelectionMenuItems;
+    }
+    set getSelectionMenuItems(value) {
+        this.#getSelectionMenuItems = value;
+        this.requestRender();
+    }
+    get layoutFonts() {
+        return this.#layoutFonts;
+    }
+    set layoutFonts(value) {
+        this.#layoutFonts = value;
+        this.requestRender();
+    }
+    editorNode() {
+        if (!this.content) return missingContent('document', this.theme);
+        return /*#__PURE__*/ createElement(DocumentEditor, {
+            artifactId: this.artifactId,
+            content: this.content,
+            extensions: this.extensions,
+            fileActions: this.fileActions,
+            getSelectionMenuItems: this.getSelectionMenuItems,
+            kernelWasmUrl: this.kernelWasmUrl,
+            layoutFonts: this.layoutFonts,
+            onAgentRequest: (request)=>this.requestAgent(request),
+            onChange: (content)=>this.changeContent(content),
+            preview: this.preview,
+            saveStatus: this.saveStatus,
+            theme: this.theme
+        });
+    }
+}
+class A3SMarkdownEditorElement extends A3SContentEditorElement {
+    #extensions;
+    #getSelectionMenuItems;
+    static get observedAttributes() {
+        return [
+            'preview',
+            'save-status',
+            'theme'
+        ];
+    }
+    get extensions() {
+        return this.#extensions;
+    }
+    set extensions(value) {
+        this.#extensions = value;
+        this.requestRender();
+    }
+    get getSelectionMenuItems() {
+        return this.#getSelectionMenuItems;
+    }
+    set getSelectionMenuItems(value) {
+        this.#getSelectionMenuItems = value;
+        this.requestRender();
+    }
+    editorNode() {
+        if (!this.content) return missingContent('Markdown', this.theme);
+        return /*#__PURE__*/ createElement(MarkdownEditor, {
+            content: this.content,
+            extensions: this.extensions,
+            fileActions: this.fileActions,
+            getSelectionMenuItems: this.getSelectionMenuItems,
+            onChange: (content)=>this.changeContent(content),
+            preview: this.preview,
+            saveStatus: this.saveStatus,
+            theme: this.theme
+        });
+    }
+}
+class A3SSpreadsheetEditorElement extends A3SContentEditorElement {
+    static get observedAttributes() {
+        return [
+            'kernel-wasm-url',
+            'preview',
+            'save-status',
+            'theme'
+        ];
+    }
+    get kernelWasmUrl() {
+        return this.getAttribute('kernel-wasm-url') ?? void 0;
+    }
+    set kernelWasmUrl(value) {
+        if (void 0 === value) this.removeAttribute('kernel-wasm-url');
+        else this.setAttribute('kernel-wasm-url', value);
+    }
+    editorNode() {
+        if (!this.content) return missingContent('spreadsheet', this.theme);
+        return /*#__PURE__*/ createElement(SpreadsheetEditor, {
+            content: this.content,
+            fileActions: this.fileActions,
+            kernelWasmUrl: this.kernelWasmUrl,
+            onAgentRequest: (request)=>this.requestAgent(request),
+            onChange: (content)=>this.changeContent(content),
+            preview: this.preview,
+            saveStatus: this.saveStatus,
+            theme: this.theme
+        });
+    }
+}
+class A3SPresentationEditorElement extends A3SContentEditorElement {
+    static get observedAttributes() {
+        return [
+            'kernel-wasm-url',
+            'preview',
+            'save-status',
+            'theme'
+        ];
+    }
+    get kernelWasmUrl() {
+        return this.getAttribute('kernel-wasm-url') ?? void 0;
+    }
+    set kernelWasmUrl(value) {
+        if (void 0 === value) this.removeAttribute('kernel-wasm-url');
+        else this.setAttribute('kernel-wasm-url', value);
+    }
+    editorNode() {
+        if (!this.content) return missingContent('presentation', this.theme);
+        return /*#__PURE__*/ createElement(PresentationEditor, {
+            content: this.content,
+            fileActions: this.fileActions,
+            kernelWasmUrl: this.kernelWasmUrl,
+            onAgentRequest: (request)=>this.requestAgent(request),
+            onChange: (content)=>this.changeContent(content),
+            onStartSlideshow: ()=>dispatchDetail(this, 'start-slideshow', this.content),
+            preview: this.preview,
+            saveStatus: this.saveStatus,
+            theme: this.theme
+        });
+    }
+}
+class A3SPdfViewerElement extends A3SOfficeElement {
+    #loadSource;
+    #onSave;
+    static get observedAttributes() {
+        return [
+            'file-name',
+            'save-label',
+            'source-key',
+            'theme',
+            'wasm-url'
+        ];
+    }
+    get loadSource() {
+        return this.#loadSource;
+    }
+    set loadSource(value) {
+        this.#loadSource = value;
+        this.requestRender();
+    }
+    get onSave() {
+        return this.#onSave;
+    }
+    set onSave(value) {
+        this.#onSave = value;
+        this.requestRender();
+    }
+    get theme() {
+        return themeFrom(this);
+    }
+    set theme(value) {
+        this.setAttribute('theme', value);
+    }
+    editorNode() {
+        if (!this.loadSource) return missingContent('PDF source loader', this.theme);
+        return /*#__PURE__*/ createElement(PdfViewer, {
+            fileName: this.getAttribute('file-name') ?? void 0,
+            loadSource: this.loadSource,
+            onSave: this.onSave,
+            saveLabel: this.getAttribute('save-label') ?? void 0,
+            sourceKey: this.getAttribute('source-key') ?? void 0,
+            theme: this.theme,
+            wasmUrl: this.getAttribute('wasm-url') ?? void 0
+        });
+    }
+}
+const A3S_OFFICE_ELEMENT_NAMES = {
+    document: 'a3s-document-editor',
+    markdown: 'a3s-markdown-editor',
+    pdf: 'a3s-pdf-viewer',
+    presentation: 'a3s-presentation-editor',
+    spreadsheet: 'a3s-spreadsheet-editor'
+};
+function defineA3SOfficeElements(registry) {
+    const target = registry ?? ("u" < typeof customElements ? void 0 : customElements);
+    if (!target) return;
+    const elements = [
+        [
+            A3S_OFFICE_ELEMENT_NAMES.document,
+            A3SDocumentEditorElement
+        ],
+        [
+            A3S_OFFICE_ELEMENT_NAMES.markdown,
+            A3SMarkdownEditorElement
+        ],
+        [
+            A3S_OFFICE_ELEMENT_NAMES.spreadsheet,
+            A3SSpreadsheetEditorElement
+        ],
+        [
+            A3S_OFFICE_ELEMENT_NAMES.presentation,
+            A3SPresentationEditorElement
+        ],
+        [
+            A3S_OFFICE_ELEMENT_NAMES.pdf,
+            A3SPdfViewerElement
+        ]
+    ];
+    for (const [name, elementClass] of elements)if (!target.get(name)) target.define(name, elementClass);
+}
+export { A3SDocumentEditorElement, A3SMarkdownEditorElement, A3SPdfViewerElement, A3SPresentationEditorElement, A3SSpreadsheetEditorElement, A3S_OFFICE_ELEMENT_NAMES, defineA3SOfficeElements };