ssml-builder-js 2.2.0 → 2.3.0

package/dist/react.mjs

@@ -40,8 +40,9 @@ import {
   registerSsmlCompletionProvider,
   resolveExpressAsStyles,
   updateEditableText,
+  updateTagAttribute,
   validateSsml
-} from "./chunk-2XJER2BG.mjs";
+} from "./chunk-NPZ44CHU.mjs";
 import "./chunk-6S5ODO6A.mjs";
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
@@ -705,6 +706,7 @@ function useSsmlEditorState({
   const [openPopoverId, setOpenPopoverId] = useState(null);
   const [popoverVoiceName, setPopoverVoiceName] = useState(void 0);
   const [popoverPosition, setPopoverPosition] = useState(null);
+  const pendingCodeLensAttributeRef = useRef(null);
   const helpPanelId = useId();
   const draftDocumentRef = useRef(document2);
   const onSelectionChangeRef = useRef(onSelectionChange);
@@ -730,6 +732,7 @@ function useSsmlEditorState({
     setDecorationsVisible(showDecorations);
   }, [showDecorations]);
   const closePopover = useCallback((restoreFocus = false) => {
+    pendingCodeLensAttributeRef.current = null;
     setOpenPopoverId(null);
     setPopoverVoiceName(void 0);
     setPopoverPosition(null);
@@ -738,6 +741,7 @@ function useSsmlEditorState({
     }
   }, []);
   const togglePopover = useCallback((id, trigger) => {
+    pendingCodeLensAttributeRef.current = null;
     setOpenPopoverId((currentId) => {
       if (currentId === id) {
         setPopoverVoiceName(void 0);
@@ -761,13 +765,41 @@ function useSsmlEditorState({
     }
     const updatePopoverPosition = () => {
       const trigger = activePopoverTriggerRef.current;
-      if (!trigger) {
+      if (trigger) {
+        const triggerBounds = trigger.getBoundingClientRect();
+        setPopoverPosition({
+          top: triggerBounds.bottom + 4,
+          left: triggerBounds.left
+        });
         return;
       }
-      const triggerBounds = trigger.getBoundingClientRect();
+      const pending = pendingCodeLensAttributeRef.current;
+      const editor = editorRef.current;
+      const model = editor?.getModel();
+      if (!pending || !editor || !model) {
+        return;
+      }
+      const position = model.getPositionAt(pending.tagRange.start);
+      const visiblePosition = editor.getScrolledVisiblePosition(position);
+      const editorElement = editor.getDomNode();
+      if (!visiblePosition || !editorElement) {
+        return;
+      }
+      const editorBounds = editorElement.getBoundingClientRect();
+      const menu = activePopoverMenuRef.current;
+      const margin = 8;
       setPopoverPosition({
-        top: triggerBounds.bottom + 4,
-        left: triggerBounds.left
+        top: Math.max(
+          margin,
+          Math.min(
+            editorBounds.top + visiblePosition.top + visiblePosition.height + 4,
+            window.innerHeight - (menu?.offsetHeight ?? 0) - margin
+          )
+        ),
+        left: Math.max(
+          margin,
+          Math.min(editorBounds.left + visiblePosition.left, window.innerWidth - (menu?.offsetWidth ?? 0) - margin)
+        )
       });
     };
     const handlePointerDown = (event) => {
@@ -832,11 +864,48 @@ function useSsmlEditorState({
   );
   const handleInsert = useCallback(
     (insertion, option) => {
-      if (editorRef.current) {
-        applySsmlInsertion(editorRef.current, insertion, option);
+      const editor = editorRef.current;
+      const pending = pendingCodeLensAttributeRef.current;
+      if (!editor) {
+        return;
       }
+      if (pending?.insertionId === insertion.id) {
+        const model = editor.getModel();
+        if (model && model.getVersionId() === pending.modelVersionId) {
+          const source = model.getValue();
+          const tagText = source.slice(pending.tagRange.start, pending.tagRange.end);
+          const updatedTag = updateTagAttribute(
+            tagText,
+            { start: 0, end: tagText.length },
+            pending.attributeName,
+            option.value
+          );
+          const start = model.getPositionAt(pending.tagRange.start);
+          const end = model.getPositionAt(pending.tagRange.end);
+          editor.pushUndoStop();
+          editor.executeEdits("ssml-code-lens", [
+            {
+              range: {
+                startLineNumber: start.lineNumber,
+                startColumn: start.column,
+                endLineNumber: end.lineNumber,
+                endColumn: end.column
+              },
+              text: updatedTag
+            }
+          ]);
+          editor.pushUndoStop();
+          editor.focus();
+        }
+        pendingCodeLensAttributeRef.current = null;
+        if (!model || model.getVersionId() !== pending.modelVersionId) {
+          closePopover();
+        }
+        return;
+      }
+      applySsmlInsertion(editor, insertion, option);
     },
-    []
+    [closePopover]
   );
   const handleInsertBreak = useCallback(
     (insertion, option) => {
@@ -902,6 +971,54 @@ function useSsmlEditorState({
     []
   );
   const getOuterVoiceName = useCallback(() => getEditableRegion(draftDocumentRef.current).voiceName, []);
+  const handleCodeLensAction = useCallback((action) => {
+    const editor = editorRef.current;
+    const model = editor?.getModel();
+    if (!editor || !model) {
+      return;
+    }
+    if (action.type === "attribute") {
+      pendingCodeLensAttributeRef.current = {
+        insertionId: action.insertionId,
+        attributeName: action.attributeName,
+        tagRange: action.tagRange,
+        modelVersionId: model.getVersionId()
+      };
+      activePopoverTriggerRef.current = null;
+      setPopoverVoiceName(getEffectiveVoiceName(editor, draftDocumentRef.current));
+      setOpenPopoverId(action.insertionId);
+      setPopoverPosition(null);
+      return;
+    }
+    const source = model.getValue();
+    const toEditorRange = (range) => {
+      const start = model.getPositionAt(range.start);
+      const end = model.getPositionAt(range.end);
+      return {
+        startLineNumber: start.lineNumber,
+        startColumn: start.column,
+        endLineNumber: end.lineNumber,
+        endColumn: end.column
+      };
+    };
+    const edits = action.type === "delete" ? [{ range: toEditorRange(action.tagRange), text: "" }] : (() => {
+      const elementText = source.slice(action.elementRange.start, action.elementRange.end);
+      const closingOffset = elementText.search(/<\/\s*prosody\s*>/i);
+      const closingStart = closingOffset === -1 ? action.elementRange.end : action.elementRange.start + closingOffset;
+      const closingEnd = closingOffset === -1 ? action.elementRange.end : source.indexOf(">", closingStart) === -1 ? action.elementRange.end : source.indexOf(">", closingStart) + 1;
+      return [
+        { range: toEditorRange(action.tagRange), text: "" },
+        { range: toEditorRange({ start: closingStart, end: closingEnd }), text: "" }
+      ];
+    })();
+    editor.pushUndoStop();
+    editor.executeEdits("ssml-code-lens", edits);
+    editor.pushUndoStop();
+    pendingCodeLensAttributeRef.current = null;
+    setOpenPopoverId(null);
+    setPopoverPosition(null);
+    editor.focus();
+  }, []);
   return {
     editorRef,
     draftDocument,
@@ -934,6 +1051,7 @@ function useSsmlEditorState({
     getCurrentLineSsml: getCurrentLineSsmlValue,
     getFullSsml,
     getOuterVoiceName,
+    handleCodeLensAction,
     openPopoverId,
     popoverVoiceName,
     popoverPosition,
@@ -1190,6 +1308,180 @@ function registerSsmlCodeActions(monaco) {
   });
 }
 
+// packages/ssml-editor-react/src/ssmlCodeLens.ts
+var CODE_LENS_COMMAND = "ssml-editor.codeLens";
+function findTagEnd(source, start) {
+  let quote;
+  for (let index = start + 1; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote !== void 0) {
+      if (character === quote) {
+        quote = void 0;
+      }
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+function getAttributeValue(tag, attributeName) {
+  const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return tag.match(new RegExp(`\\b${escapedName}\\s*=\\s*(["'])([\\s\\S]*?)\\1`, "i"))?.[2];
+}
+function getTagRange(start, end) {
+  return { start, end };
+}
+function getElementEnd(source, tagName, tagEnd) {
+  const openingTag = source.slice(0, tagEnd + 1);
+  if (/\/\s*>$/.test(openingTag)) {
+    return tagEnd + 1;
+  }
+  let depth = 1;
+  let index = tagEnd + 1;
+  while (index < source.length) {
+    const nextStart = source.indexOf("<", index);
+    if (nextStart === -1) {
+      break;
+    }
+    if (source.startsWith("<!--", nextStart)) {
+      index = source.indexOf("-->", nextStart + 4);
+      index = index === -1 ? source.length : index + 3;
+      continue;
+    }
+    const nextEnd = findTagEnd(source, nextStart);
+    if (nextEnd === -1) {
+      break;
+    }
+    const nextTag = source.slice(nextStart, nextEnd + 1);
+    const closingMatch = nextTag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    const openingMatch = nextTag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    if (closingMatch?.[1]?.toLowerCase() === tagName) {
+      depth -= 1;
+      if (depth === 0) {
+        return nextEnd + 1;
+      }
+    } else if (openingMatch?.[1]?.toLowerCase() === tagName && !/\/\s*>$/.test(nextTag)) {
+      depth += 1;
+    }
+    index = nextEnd + 1;
+  }
+  return tagEnd + 1;
+}
+function createLens(model, start, end, title, action) {
+  const startPosition = model.getPositionAt(start);
+  const endPosition = model.getPositionAt(end);
+  return {
+    range: {
+      startLineNumber: startPosition.lineNumber,
+      startColumn: startPosition.column,
+      endLineNumber: endPosition.lineNumber,
+      endColumn: endPosition.column
+    },
+    command: {
+      id: CODE_LENS_COMMAND,
+      title,
+      arguments: [action]
+    }
+  };
+}
+function registerSsmlCodeLens(monaco, editor, onOpenPopover) {
+  const provider = {
+    provideCodeLenses(model) {
+      const source = model.getValue();
+      const lenses = [];
+      let index = 0;
+      while (index < source.length) {
+        const tagStart = source.indexOf("<", index);
+        if (tagStart === -1) {
+          break;
+        }
+        if (source.startsWith("<!--", tagStart)) {
+          index = source.indexOf("-->", tagStart + 4);
+          index = index === -1 ? source.length : index + 3;
+          continue;
+        }
+        const tagEnd = findTagEnd(source, tagStart);
+        if (tagEnd === -1) {
+          break;
+        }
+        const tag = source.slice(tagStart, tagEnd + 1);
+        const tagName = tag.match(/^<\s*(prosody|break)\b/i)?.[1]?.toLowerCase();
+        index = tagEnd + 1;
+        if (!tagName) {
+          continue;
+        }
+        const tagRange = getTagRange(tagStart, tagEnd + 1);
+        const elementEnd = getElementEnd(source, tagName, tagEnd);
+        const elementRange = { start: tagStart, end: elementEnd };
+        if (tagName === "prosody") {
+          lenses.push(
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Rate: ${getAttributeValue(tag, "rate") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "rate", attributeName: "rate", tagRange }
+            ),
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Pitch: ${getAttributeValue(tag, "pitch") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "pitch", attributeName: "pitch", tagRange }
+            ),
+            createLens(model, tagStart, tagEnd + 1, "Unwrap", {
+              type: "unwrap",
+              tagRange,
+              elementRange
+            })
+          );
+        } else if (/\/\s*>$/.test(tag)) {
+          lenses.push(
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Time: ${getAttributeValue(tag, "time") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "break", attributeName: "time", tagRange }
+            ),
+            createLens(model, tagStart, tagEnd + 1, "Delete", {
+              type: "delete",
+              tagRange,
+              elementRange
+            })
+          );
+        }
+      }
+      return { lenses, dispose: () => void 0 };
+    }
+  };
+  const disposable = monaco.languages.registerCodeLensProvider("xml", provider);
+  const commandHandler = (_accessor, ...args) => {
+    const action = args[0];
+    if (action && typeof action === "object" && "type" in action) {
+      onOpenPopover(action);
+    }
+  };
+  const commandDisposable = typeof monaco.editor?.registerCommand === "function" ? monaco.editor.registerCommand(CODE_LENS_COMMAND, commandHandler) : typeof monaco.registerCommand === "function" ? monaco.registerCommand(CODE_LENS_COMMAND, commandHandler) : editor.addAction({
+    id: CODE_LENS_COMMAND,
+    label: "SSML CodeLens",
+    run: (_editor, ...args) => {
+      const action = args[0];
+      if (action && typeof action === "object" && "type" in action) {
+        onOpenPopover(action);
+      }
+    }
+  });
+  return {
+    dispose: () => {
+      commandDisposable.dispose();
+      disposable.dispose();
+    }
+  };
+}
+
 // packages/ssml-editor-react/src/hooks/useSsmlMonaco.ts
 var SSML_DIAGNOSTICS_DEBOUNCE_MS = 300;
 var hoverProviderRegistrations = /* @__PURE__ */ new WeakMap();
@@ -1291,7 +1583,9 @@ function useSsmlMonaco({
   language,
   text,
   decorationsVisible,
+  enableCodeLens,
   getOuterVoiceName,
+  onOpenPopover,
   onSelectionOverlayChange,
   onActiveTagsChange,
   onSyntaxErrorChange
@@ -1301,6 +1595,7 @@ function useSsmlMonaco({
   const monacoRef = useRef2(null);
   const completionProviderRef = useRef2(null);
   const codeActionProviderRef = useRef2(null);
+  const codeLensProviderRef = useRef2(null);
   const releaseHoverProviderRef = useRef2(null);
   const selectionChangeRef = useRef2(null);
   const cursorPositionChangeRef = useRef2(null);
@@ -1310,16 +1605,20 @@ function useSsmlMonaco({
   const inlineDecorationIdsRef = useRef2([]);
   const languageRef = useRef2(language);
   const decorationsVisibleRef = useRef2(decorationsVisible);
+  const enableCodeLensRef = useRef2(enableCodeLens);
   const getOuterVoiceNameRef = useRef2(getOuterVoiceName);
   const onSelectionOverlayChangeRef = useRef2(onSelectionOverlayChange);
   const onActiveTagsChangeRef = useRef2(onActiveTagsChange);
   const onSyntaxErrorChangeRef = useRef2(onSyntaxErrorChange);
+  const onOpenPopoverRef = useRef2(onOpenPopover);
   languageRef.current = language;
   decorationsVisibleRef.current = decorationsVisible;
+  enableCodeLensRef.current = enableCodeLens;
   getOuterVoiceNameRef.current = getOuterVoiceName;
   onSelectionOverlayChangeRef.current = onSelectionOverlayChange;
   onActiveTagsChangeRef.current = onActiveTagsChange;
   onSyntaxErrorChangeRef.current = onSyntaxErrorChange;
+  onOpenPopoverRef.current = onOpenPopover;
   const runSsmlDiagnostics = useCallback2((editor, monaco) => {
     const model = editor.getModel();
     if (!model) {
@@ -1372,6 +1671,8 @@ function useSsmlMonaco({
     completionProviderRef.current = null;
     codeActionProviderRef.current?.dispose();
     codeActionProviderRef.current = null;
+    codeLensProviderRef.current?.dispose();
+    codeLensProviderRef.current = null;
     for (const disposable of selectionLayoutDisposablesRef.current) {
       disposable.dispose();
     }
@@ -1416,6 +1717,13 @@ function useSsmlMonaco({
         model: editor.getModel()
       });
       codeActionProviderRef.current = registerSsmlCodeActions(monaco);
+      if (enableCodeLensRef.current) {
+        codeLensProviderRef.current = registerSsmlCodeLens(
+          monaco,
+          editor,
+          (action) => onOpenPopoverRef.current(action)
+        );
+      }
       releaseHoverProviderRef.current = acquireSsmlHoverProvider(monaco, languageRef.current);
       runSsmlDiagnostics(editor, monaco);
       const model = editor.getModel();
@@ -1433,6 +1741,15 @@ function useSsmlMonaco({
     },
     [disposeMonacoResources, editorRef, runSsmlDiagnostics, scheduleSsmlDiagnostics, syncActiveTags]
   );
+  useEffect2(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) {
+      return;
+    }
+    codeLensProviderRef.current?.dispose();
+    codeLensProviderRef.current = enableCodeLens ? registerSsmlCodeLens(monaco, editor, (action) => onOpenPopoverRef.current(action)) : null;
+  }, [editorRef, enableCodeLens]);
   useEffect2(() => {
     const monaco = monacoRef.current;
     if (!monaco) {
@@ -1953,6 +2270,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   showToolbarIcons = true,
   showToolbarLabels = false,
   showDecorations = false,
+  enableCodeLens = true,
   buttonVisibility,
   editorOptions,
   settings,
@@ -2085,6 +2403,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
     getCurrentLineSsml: getCurrentLineSsml2,
     getFullSsml,
     getOuterVoiceName,
+    handleCodeLensAction,
     openPopoverId,
     popoverVoiceName,
     popoverPosition,
@@ -2110,7 +2429,9 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
     getOuterVoiceName,
     onSelectionOverlayChange: refreshSelectionOverlay,
     onActiveTagsChange: updateActiveTags,
-    onSyntaxErrorChange: setSyntaxError
+    onSyntaxErrorChange: setSyntaxError,
+    enableCodeLens,
+    onOpenPopover: handleCodeLensAction
   });
   useImperativeHandle(
     ref,
@@ -2388,6 +2709,8 @@ export {
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,
-  createSsmlEditorInsertionDefinition
+  createSsmlEditorInsertionDefinition,
+  registerSsmlCodeLens,
+  updateTagAttribute
 };
 //# sourceMappingURL=react.mjs.map