@sciflow/editor-start 0.0.1-beta2 → 0.0.2

package/dist/lib/selection-editor.js

@@ -16,7 +16,8 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
-import { SourceField } from '@sciflow/editor-core';
+import { SourceField, t, LOCALE_CHANGE_EVENT } from '@sciflow/editor-core';
+import { getMarkRange } from '@sciflow/editor-core/commands';
 import { renderTexToSvg } from '@sciflow/editor-core/features/math';
 import { Fragment as PMFragment } from 'prosemirror-model';
 import { EditorState, NodeSelection } from 'prosemirror-state';
@@ -54,9 +55,12 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         this.citationDraft = null;
         /** Draft values for cross-reference sidebar (display text + target href). */
         this.crossReferenceDraft = null;
+        /** Draft values for hyperlink (anchor mark) sidebar. */
+        this.hyperlinkDraft = null;
         this.draftAttrs = null;
         this.draftDirty = false;
         this.pinSelection = false;
+        this.showAllAttrs = false;
         this.resolvedEditor = null;
         this.themeStyleElements = [];
         this.citationSourceContainer = null;
@@ -72,6 +76,8 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     static { this.styles = css `${unsafeCSS(selectionEditorCss)}`; }
     connectedCallback() {
         super.connectedCallback();
+        this.localeListener = () => this.requestUpdate();
+        document.addEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
         this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
             this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
         });
@@ -85,6 +91,10 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             clearTimeout(this.selectionDebounce);
             this.selectionDebounce = null;
         }
+        if (this.localeListener) {
+            document.removeEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
+            this.localeListener = undefined;
+        }
         this.themeUnsub?.();
         this.themeUnsub = undefined;
     }
@@ -94,6 +104,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             this.resolveEditorReference();
         }
         if (changedProperties.has('elementInfo')) {
+            this.showAllAttrs = false;
             if (this.elementInfo?.type === 'math') {
                 const attrs = this.elementInfo.attrs;
                 this.mathDraft = {
@@ -134,6 +145,23 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                 this.mathDraft = null;
                 this.mathPreviewResult = null;
                 this.citationDraft = null;
+                this.hyperlinkDraft = null;
+                this.resetDraftAttrs();
+                this.destroyCitationContentView();
+                if (this.mathPreviewDebounce) {
+                    clearTimeout(this.mathPreviewDebounce);
+                    this.mathPreviewDebounce = null;
+                }
+            }
+            else if (this.elementInfo?.type === 'anchor') {
+                const attrs = this.elementInfo.attrs;
+                this.hyperlinkDraft = {
+                    href: typeof attrs?.href === 'string' ? attrs.href : '',
+                };
+                this.mathDraft = null;
+                this.mathPreviewResult = null;
+                this.citationDraft = null;
+                this.crossReferenceDraft = null;
                 this.resetDraftAttrs();
                 this.destroyCitationContentView();
                 if (this.mathPreviewDebounce) {
@@ -146,6 +174,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                 this.mathPreviewResult = null;
                 this.citationDraft = null;
                 this.crossReferenceDraft = null;
+                this.hyperlinkDraft = null;
                 this.resetDraftAttrs();
                 this.destroyCitationContentView();
                 if (this.mathPreviewDebounce) {
@@ -168,7 +197,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                             this.citationDraft = { ...this.citationDraft, sourceEncoded: encoded };
                         }
                     },
-                    getReferences: () => refs.map((r) => ({ id: r.id, rawCitation: r.rawCitation })),
+                    getReferences: () => refs.map((r) => ({ id: r.id, rawReference: r.rawReference })),
                 };
                 if (adapter.update) {
                     adapter.update(this.citationSourceContainer, items, context);
@@ -181,7 +210,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             return html `
         <div class="selection-editor-container" @keydown=${this.handleGenericKeydown}>
           <p class="selection-editor-placeholder">
-            No element selected. Click or select an element in the editor.
+            ${t('selectionEditor.noElement')}
           </p>
         </div>
       `;
@@ -195,38 +224,29 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         if (this.elementInfo.type === 'link' && this.crossReferenceDraft) {
             return this.renderCrossReferenceSidebar();
         }
+        if (this.elementInfo.type === 'anchor' && this.hyperlinkDraft) {
+            return this.renderHyperlinkSidebar();
+        }
         if (this.elementInfo.type === 'figure') {
             return this.renderFigureSidebar();
         }
         const uiSchema = this.resolvedEditor?.getSelectionUiSchema?.();
         const nodeFragment = uiSchema?.properties?.nodes?.[this.elementInfo.type];
-        const useSchemaDriven = nodeFragment &&
-            (this.elementInfo.type === 'heading' ||
-                this.elementInfo.type === 'figure');
+        const useSchemaDriven = !!nodeFragment;
         if (useSchemaDriven && nodeFragment) {
             const attrs = this.getEffectiveAttrs();
             return html `
         <div class="selection-editor-container">
           ${this.renderSelectionControls()}
-          <div class="selection-editor-field">
-            <span class="selection-editor-label">Type:</span>
-            <code class="selection-editor-value">${this.elementInfo.type}</code>
-          </div>
-          ${this.elementInfo.id
-                ? html `
-                <div class="selection-editor-field">
-                  <span class="selection-editor-label">ID:</span>
-                  <code class="selection-editor-value">${this.elementInfo.id}</code>
-                </div>
-              `
-                : ''}
+          <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
           ${renderNodeFromUiSchema(nodeFragment, {
                 attrs,
                 onAttrChange: (attr, value) => this.setDraftAttr(attr, value),
+                showHidden: this.showAllAttrs,
                 getOptionsSource: (id) => {
                     if (id === 'references') {
                         const refs = this.resolvedEditor?.references ?? [];
-                        return refs.map((r) => ({ id: r.id, label: r.rawCitation ?? r.id }));
+                        return refs.map((r) => ({ id: r.id, label: r.rawReference ?? r.id }));
                     }
                     if (id === 'outlineTargets') {
                         return this.getOutlineTargetOptions();
@@ -235,88 +255,60 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                 },
             })}
           ${this.renderDraftActions()}
+          <button
+            class="selection-editor-expand-btn"
+            @click=${() => { this.showAllAttrs = !this.showAllAttrs; }}
+          >${this.showAllAttrs ? t('selectionEditor.collapseAttributes') : t('selectionEditor.expandAttributes')}</button>
         </div>
       `;
         }
         return html `
       <div class="selection-editor-container" @keydown=${this.handleGenericKeydown}>
         ${this.renderSelectionControls()}
-        <!-- Type display -->
-        <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">${this.elementInfo.type}</code>
-        </div>
 
-        <!-- ID display (read-only) -->
-        ${this.elementInfo.id
-            ? html `
-              <div class="selection-editor-field">
-                <span class="selection-editor-label">ID:</span>
-                <code class="selection-editor-value">${this.elementInfo.id}</code>
-              </div>
-            `
-            : ''}
+        <!-- ELEMENT section -->
+        <div class="selection-editor-section">
+          <span class="selection-editor-section-label">${t('selectionEditor.sectionElement')}</span>
+          <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        </div>
 
-        <!-- Attributes -->
+        <!-- FORMATTING / Attributes -->
         ${this.elementInfo.attrs && Object.keys(this.elementInfo.attrs).length > 0
             ? (() => {
                 const attrs = this.getEffectiveAttrs();
                 const filtered = Object.entries(attrs).filter(([key]) => key !== 'id' &&
                     key !== 'data' &&
                     !(this.elementInfo.type === 'citation' && key === 'source'));
-                if (this.elementInfo.type === 'heading' && filtered.length > 0) {
-                    const levelEntry = filtered.find(([k]) => k === 'level');
-                    const rest = filtered.filter(([k]) => k !== 'level');
-                    return html `
-                  ${levelEntry
-                        ? html `
-                        <div class="selection-editor-attrs">
-                          ${this.renderAttributeField(levelEntry[0], levelEntry[1])}
-                        </div>
-                      `
-                        : ''}
-                  ${rest.length > 0
-                        ? html `
-                        <details class="selection-editor-details">
-                          <summary class="selection-editor-details-summary">More attributes</summary>
-                          <div class="selection-editor-details-body">
-                            ${rest.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
-                          </div>
-                        </details>
-                      `
-                        : ''}
-                `;
-                }
-                if (this.elementInfo.type === 'paragraph' && filtered.length > 0) {
-                    const alignmentEntry = filtered.find(([k]) => k === 'text-align');
-                    const rest = filtered.filter(([k]) => k !== 'text-align');
-                    return html `
-                  ${alignmentEntry
-                        ? html `
-                        <div class="selection-editor-attrs">
-                          ${this.renderAttributeField(alignmentEntry[0], alignmentEntry[1])}
-                        </div>
-                      `
-                        : ''}
-                  ${rest.length > 0
-                        ? html `
-                        <details class="selection-editor-details">
-                          <summary class="selection-editor-details-summary">More attributes</summary>
-                          <div class="selection-editor-details-body">
-                            ${rest.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
-                          </div>
-                        </details>
-                      `
-                        : ''}
-                `;
-                }
+                // Split into primary (formatting) attributes and the rest
+                const primaryKeys = ['text-align', 'level', 'type'];
+                const primary = filtered.filter(([k]) => primaryKeys.includes(k));
+                const rest = filtered.filter(([k]) => !primaryKeys.includes(k));
                 return html `
-                <div class="selection-editor-field">
-                  <span class="selection-editor-label">Attributes:</span>
-                  <div class="selection-editor-attrs">
-                    ${filtered.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
-                  </div>
-                </div>
+                ${primary.length > 0
+                    ? html `
+                    <div class="selection-editor-section">
+                      <span class="selection-editor-section-label">${t('selectionEditor.sectionFormatting')}</span>
+                      <div class="selection-editor-attrs">
+                        ${primary.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
+                      </div>
+                    </div>
+                  `
+                    : ''}
+                ${rest.length > 0 || primary.length === 0
+                    ? html `
+                    <details class="selection-editor-details">
+                      <summary class="selection-editor-details-summary">
+                        <span class="selection-editor-section-label">${t('selectionEditor.sectionAttributes')}</span>
+                        <svg class="selection-editor-details-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                      </summary>
+                      <div class="selection-editor-details-body">
+                        ${rest.length > 0
+                        ? rest.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))
+                        : html `<span class="selection-editor-placeholder">${t('selectionEditor.noElement')}</span>`}
+                      </div>
+                    </details>
+                  `
+                    : ''}
               `;
             })()
             : ''}
@@ -457,8 +449,40 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             };
             return;
         }
+        // Check for anchor mark (hyperlink) at cursor or in selection
+        const anchorMarkType = view.state.schema.marks['anchor'];
+        if (anchorMarkType) {
+            const { from, to, empty } = sel;
+            let anchorMark = null;
+            if (empty) {
+                const marks = view.state.storedMarks ?? sel.$from.marks();
+                anchorMark = marks.find((m) => m.type === anchorMarkType) ?? null;
+                if (!anchorMark) {
+                    // Also check the character before the cursor
+                    const marksBefore = sel.$from.marks();
+                    anchorMark = marksBefore.find((m) => m.type === anchorMarkType) ?? null;
+                }
+            }
+            else {
+                view.state.doc.nodesBetween(from, to, (node) => {
+                    if (!anchorMark && node.isText) {
+                        anchorMark = node.marks.find((m) => m.type === anchorMarkType) ?? null;
+                    }
+                    return !anchorMark;
+                });
+            }
+            if (anchorMark) {
+                this.elementInfo = {
+                    type: 'anchor',
+                    id: null,
+                    attrs: { ...anchorMark.attrs },
+                    position: null,
+                };
+                return;
+            }
+        }
         let elementInfo = null;
-        let nodePosition = null;
+        let nodePosition;
         const anchor = selection?.anchor ?? 0;
         const $pos = view.state.doc.resolve(anchor);
         const citationType = view.state.schema.nodes.citation;
@@ -640,7 +664,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             if (!id)
                 continue;
             const text = f.text?.trim() || id;
-            options.push({ id: `#${id}`, label: `Figure: ${text}` });
+            options.push({ id: `#${id}`, label: `${t('outline.figure')}: ${text}` });
         }
         this.outlineTargetOptionsCacheDoc = pmDoc;
         this.outlineTargetOptionsCache = options;
@@ -695,9 +719,23 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     /**
      * Render a single attribute field, decoding known encoded values for readability.
      */
+    getNodeTypeLabel(type) {
+        const known = {
+            figure: () => t('selectionEditor.figure'),
+            math: () => t('selectionEditor.math'),
+            citation: () => t('selectionEditor.citation'),
+            anchor: () => t('selectionEditor.hyperlink'),
+            link: () => t('selectionEditor.crossReference'),
+            heading: () => t('selectionEditor.heading'),
+            paragraph: () => t('selectionEditor.paragraph'),
+        };
+        const label = known[type]?.() ?? type.replace(/_/g, ' ');
+        return label.replace(/^\w/, (m) => m.toUpperCase());
+    }
     renderAttributeField(attrName, attrValue) {
         const decodedValue = this.decodeSpecialAttribute(attrName, attrValue);
         const renderedValue = decodedValue === null || decodedValue === undefined ? '' : String(decodedValue);
+        const friendlyLabel = this.getAttributeLabel(attrName);
         if (attrName === 'level' && this.elementInfo?.type === 'heading') {
             const level = Math.min(6, Math.max(1, parseInt(renderedValue, 10) || 1));
             return html `
@@ -706,7 +744,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             class="selection-editor-attr-label"
             for="selection-editor-attr-${attrName}"
           >
-            ${attrName}:
+            ${friendlyLabel}
           </label>
           <select
             id="selection-editor-attr-${attrName}"
@@ -725,19 +763,27 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           class="selection-editor-attr-label"
           for="selection-editor-attr-${attrName}"
         >
-          ${attrName}:
+          ${friendlyLabel}
         </label>
         <input
           type="text"
           id="selection-editor-attr-${attrName}"
           class="selection-editor-input"
           .value=${renderedValue}
-          placeholder="No value"
+          placeholder=${t('selectionEditor.defaultValue')}
           @change=${(e) => this.handleDraftAttrChange(e, attrName)}
         />
       </div>
     `;
     }
+    /**
+     * Convert a raw attribute name like 'text-align' to a human-readable label.
+     */
+    getAttributeLabel(attrName) {
+        return attrName
+            .replace(/[-_]/g, ' ')
+            .replace(/^\w/, (m) => m.toUpperCase());
+    }
     /**
      * Decode known encoded attributes for more readable display/editing.
      */
@@ -783,7 +829,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                     this.citationDraft = { ...this.citationDraft, sourceEncoded: encoded };
                 }
             },
-            getReferences: () => refs.map((r) => ({ id: r.id, rawCitation: r.rawCitation })),
+            getReferences: () => refs.map((r) => ({ id: r.id, rawReference: r.rawReference })),
         };
         adapter.render(container, items.length > 0 ? items : [{ id: '' }], context);
     }
@@ -830,28 +876,17 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         const attrs = this.getEffectiveAttrs();
         const alt = typeof attrs.alt === 'string' ? attrs.alt : '';
         return html `
-      <div class="selection-editor-container selection-editor-figure" role="form" aria-label="Edit figure" @keydown=${this.handleGenericKeydown}>
+      <div class="selection-editor-container selection-editor-figure" role="form" aria-label=${t('selectionEditor.editFigure')} @keydown=${this.handleGenericKeydown}>
         ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
         <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">figure</code>
-        </div>
-        ${this.elementInfo?.id
-            ? html `
-              <div class="selection-editor-field">
-                <span class="selection-editor-label">ID:</span>
-                <code class="selection-editor-value">${this.elementInfo.id}</code>
-              </div>
-            `
-            : ''}
-        <div class="selection-editor-field">
-          <label class="selection-editor-label" for="figure-alt">Alt text</label>
+          <label class="selection-editor-label" for="figure-alt">${t('selectionEditor.altText')}</label>
           <input
             type="text"
             id="figure-alt"
             class="selection-editor-input"
             .value=${alt}
-            placeholder="Describe the image for accessibility"
+            placeholder=${t('selectionEditor.altTextPlaceholder')}
             @change=${(e) => this.handleDraftAttrChange(e, 'alt')}
           />
         </div>
@@ -870,21 +905,18 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
       <div
         class="selection-editor-container selection-editor-math"
         role="form"
-        aria-label="Edit equation"
+        aria-label=${t('selectionEditor.editEquation')}
         @keydown=${this.handleMathKeydown}
       >
         ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
         <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">math</code>
-        </div>
-        <div class="selection-editor-field">
-          <label class="selection-editor-label" for="math-tex">TeX</label>
+          <label class="selection-editor-label" for="math-tex">${t('selectionEditor.tex')}</label>
           <textarea
             id="math-tex"
             class="selection-editor-textarea"
             .value=${d.tex}
-            placeholder="e.g. x^2 + y^2 = z^2"
+            placeholder=${t('selectionEditor.texPlaceholder')}
             rows="4"
             aria-describedby=${previewErr ? 'math-preview-error' : previewWarnings.length ? 'math-preview-warnings' : undefined}
             @input=${(e) => {
@@ -895,7 +927,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           ></textarea>
         </div>
         <div class="selection-editor-field">
-          <label class="selection-editor-label" for="math-style">Style</label>
+          <label class="selection-editor-label" for="math-style">${t('selectionEditor.style')}</label>
           <select
             id="math-style"
             class="selection-editor-input"
@@ -905,25 +937,25 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             this.scheduleMathPreview();
         }}
           >
-            <option value="inline">Inline</option>
-            <option value="display">Display</option>
+            <option value="inline">${t('selectionEditor.inline')}</option>
+            <option value="display">${t('selectionEditor.display')}</option>
           </select>
         </div>
         <div class="selection-editor-field">
-          <label class="selection-editor-label" for="math-label">Label (optional)</label>
+          <label class="selection-editor-label" for="math-label">${t('selectionEditor.labelOptional')}</label>
           <input
             id="math-label"
             type="text"
             class="selection-editor-input"
             .value=${d.label}
-            placeholder="eq:mylabel"
+            placeholder=${t('selectionEditor.labelPlaceholder')}
             @input=${(e) => {
             this.mathDraft = { ...this.mathDraft, label: e.target.value };
         }}
           />
         </div>
         <div class="selection-editor-field">
-          <span class="selection-editor-label">Preview</span>
+          <span class="selection-editor-label">${t('selectionEditor.preview')}</span>
           <div
             class="selection-editor-math-preview"
             ${ref((el) => {
@@ -933,7 +965,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             }
         })}
             role="img"
-            aria-label="Equation preview"
+            aria-label=${t('selectionEditor.equationPreview')}
           ></div>
           ${previewErr
             ? html `<p id="math-preview-error" class="selection-editor-math-error" role="alert">${previewErr}</p>`
@@ -952,9 +984,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             class="selection-editor-button selection-editor-button--primary"
             @click=${this.applyMathDraft}
           >
-            Apply
+            ${t('selectionEditor.apply')}
           </button>
-          <span class="selection-editor-math-hint">Ctrl+Enter to apply, Escape to cancel</span>
+          <span class="selection-editor-math-hint">${t('selectionEditor.mathHint')}</span>
         </div>
         <p class="selection-editor-math-docs">
           <a
@@ -962,7 +994,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             target="_blank"
             rel="noopener noreferrer"
             class="selection-editor-math-docs-link"
-          >MathJax 4 docs</a>
+          >${t('selectionEditor.mathDocsLink')}</a>
         </p>
       </div>
     `;
@@ -1056,21 +1088,18 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
       <div
         class="selection-editor-container selection-editor-citation"
         role="form"
-        aria-label="Edit citation"
+        aria-label=${t('selectionEditor.editCitation')}
         @keydown=${this.handleCitationKeydown}
       >
         ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
         <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">citation</code>
-        </div>
-        <div class="selection-editor-field">
-          <label class="selection-editor-label" for="citation-content">Raw citation text</label>
+          <label class="selection-editor-label" for="citation-content">${t('selectionEditor.inTextCitation')}</label>
           <div
             id="citation-content"
             class="selection-editor-input selection-editor-citation-content selection-editor-citation-pm"
             role="textbox"
-            aria-label="Raw citation text (supports bold and italic)"
+            aria-label=${t('selectionEditor.inTextCitationAriaLabel')}
             ${ref((el) => {
             if (el) {
                 this.mountCitationContentEditor(el);
@@ -1082,7 +1111,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           ></div>
         </div>
         <div class="selection-editor-attr-field">
-          <span class="selection-editor-label">Semantic reference:</span>
+          <span class="selection-editor-label">${t('selectionEditor.semanticReference')}</span>
           <div
             class="citation-source-adapter-root"
             ${ref((el) => {
@@ -1103,9 +1132,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             class="selection-editor-button selection-editor-button--primary"
             @click=${this.applyCitationDraft}
           >
-            Update
+            ${t('selectionEditor.update')}
           </button>
-          <span class="selection-editor-citation-hint">Ctrl+Enter to apply</span>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
         </div>
       </div>
     `;
@@ -1150,22 +1179,19 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
       <div
         class="selection-editor-container selection-editor-citation"
         role="form"
-        aria-label="Edit cross-reference"
+        aria-label=${t('selectionEditor.editCrossReference')}
         @keydown=${this.handleCrossReferenceKeydown}
       >
         ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
         <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">cross-reference</code>
-        </div>
-        <div class="selection-editor-field">
-          <label class="selection-editor-label" for="crossref-content">Display text</label>
+          <label class="selection-editor-label" for="crossref-content">${t('selectionEditor.displayText')}</label>
           <input
             id="crossref-content"
             type="text"
             class="selection-editor-input"
             .value=${d.content}
-            placeholder="e.g. Chapter 1, Figure 1, Abstract"
+            placeholder=${t('selectionEditor.displayTextPlaceholder')}
             @input=${(e) => {
             this.crossReferenceDraft = {
                 ...this.crossReferenceDraft,
@@ -1175,7 +1201,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           />
         </div>
         <div class="selection-editor-field">
-          <label class="selection-editor-label" for="crossref-target">Target</label>
+          <label class="selection-editor-label" for="crossref-target">${t('selectionEditor.target')}</label>
           <select
             id="crossref-target"
             class="selection-editor-input selection-editor-select"
@@ -1199,9 +1225,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             class="selection-editor-button selection-editor-button--primary"
             @click=${this.applyCrossReferenceDraft}
           >
-            Update
+            ${t('selectionEditor.update')}
           </button>
-          <span class="selection-editor-citation-hint">Ctrl+Enter to apply</span>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
         </div>
       </div>
     `;
@@ -1234,6 +1260,117 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             this.applyCrossReferenceDraft();
         }
     }
+    /**
+     * Render the hyperlink (anchor mark) sidebar: URL input, Apply and Remove buttons.
+     */
+    renderHyperlinkSidebar() {
+        const d = this.hyperlinkDraft;
+        return html `
+      <div
+        class="selection-editor-container selection-editor-citation"
+        role="form"
+        aria-label=${t('selectionEditor.editHyperlink')}
+        @keydown=${this.handleHyperlinkKeydown}
+      >
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel('anchor')}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="hyperlink-href">${t('selectionEditor.url')}</label>
+          <input
+            id="hyperlink-href"
+            type="url"
+            class="selection-editor-input"
+            .value=${d.href}
+            placeholder=${t('selectionEditor.urlPlaceholder')}
+            @input=${(e) => {
+            this.hyperlinkDraft = { href: e.target.value };
+        }}
+          />
+        </div>
+        <div class="selection-editor-citation-actions">
+          <button
+            type="button"
+            class="selection-editor-button selection-editor-button--primary"
+            @click=${this.applyHyperlinkDraft}
+          >
+            ${t('selectionEditor.update')}
+          </button>
+          <button
+            type="button"
+            class="selection-editor-button"
+            @click=${this.removeHyperlink}
+          >
+            ${t('selectionEditor.removeLink')}
+          </button>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
+        </div>
+      </div>
+    `;
+    }
+    applyHyperlinkDraft() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !this.hyperlinkDraft)
+            return;
+        const { state } = view;
+        const anchorMarkType = state.schema.marks['anchor'];
+        if (!anchorMarkType)
+            return;
+        const newMark = anchorMarkType.create({ href: this.hyperlinkDraft.href, title: null, id: null });
+        // Find a document position known to be inside the anchor mark so that
+        // getMarkRange can resolve the full extent, regardless of where the
+        // selection boundaries fall relative to the marked text.
+        const { from, to, empty } = state.selection;
+        let posInsideMark = null;
+        if (!empty) {
+            state.doc.nodesBetween(from, to, (node, pos) => {
+                if (posInsideMark === null && node.isText && node.marks.some((m) => m.type === anchorMarkType)) {
+                    posInsideMark = pos + 1; // step into the text node
+                }
+                return posInsideMark === null;
+            });
+        }
+        const resolvedPos = posInsideMark !== null
+            ? state.doc.resolve(posInsideMark)
+            : state.selection.$from;
+        const range = getMarkRange(resolvedPos, anchorMarkType, null);
+        if (!range) {
+            // Mark exists only in storedMarks; update it in place.
+            view.dispatch(state.tr.addStoredMark(newMark));
+            return;
+        }
+        const tr = state.tr
+            .removeMark(range.from, range.to, anchorMarkType)
+            .addMark(range.from, range.to, newMark);
+        view.dispatch(tr);
+    }
+    removeHyperlink() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view)
+            return;
+        const { state } = view;
+        const anchorMarkType = state.schema.marks['anchor'];
+        if (!anchorMarkType)
+            return;
+        const { from, to, empty } = state.selection;
+        if (empty) {
+            const range = getMarkRange(state.selection.$from, anchorMarkType, null);
+            if (!range) {
+                // Mark exists only in storedMarks; clear it.
+                view.dispatch(state.tr.removeStoredMark(anchorMarkType));
+                return;
+            }
+            view.dispatch(state.tr.removeMark(range.from, range.to, anchorMarkType));
+        }
+        else {
+            view.dispatch(state.tr.removeMark(from, to, anchorMarkType));
+        }
+    }
+    handleHyperlinkKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyHyperlinkDraft();
+        }
+    }
     resetDraftAttrs() {
         this.draftAttrs = null;
         this.draftDirty = false;
@@ -1291,16 +1428,16 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           class="selection-editor-button selection-editor-button--primary"
           @click=${this.applyDraftAttrs}
         >
-          Apply
+          ${t('selectionEditor.apply')}
         </button>
         <button
           type="button"
           class="selection-editor-button"
           @click=${this.revertDraftAttrs}
         >
-          Revert
+          ${t('selectionEditor.revert')}
         </button>
-        <span class="selection-editor-hint">Ctrl+Enter to apply, Escape to revert</span>
+        <span class="selection-editor-hint">${t('selectionEditor.draftHint')}</span>
       </div>
     `;
     }
@@ -1313,7 +1450,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
           @click=${this.togglePinSelection}
           aria-pressed=${this.pinSelection ? 'true' : 'false'}
         >
-          ${this.pinSelection ? 'Unpin selection' : 'Pin selection'}
+          ${this.pinSelection ? t('selectionEditor.unpinSelection') : t('selectionEditor.pinSelection')}
         </button>
       </div>
     `;
@@ -1387,6 +1524,9 @@ __decorate([
 __decorate([
     state()
 ], SciFlowSelectionEditorElement.prototype, "crossReferenceDraft", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "hyperlinkDraft", void 0);
 __decorate([
     state()
 ], SciFlowSelectionEditorElement.prototype, "draftAttrs", void 0);
@@ -1396,6 +1536,9 @@ __decorate([
 __decorate([
     state()
 ], SciFlowSelectionEditorElement.prototype, "pinSelection", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "showAllAttrs", void 0);
 SciFlowSelectionEditorElement = __decorate([
     customElement('sciflow-selection-editor')
 ], SciFlowSelectionEditorElement);