@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/src/index.ts

@@ -89,6 +89,7 @@ export type { RawEditorProps } from './RawEditor.js';
 
 export { WysiwygEditor } from './WysiwygEditor.js';
 export type { WysiwygEditorProps } from './WysiwygEditor.js';
+export type { WriteCanvasSettings } from './writeCanvasSettings.js';
 
 export { PreviewPanel } from './PreviewPanel.js';
 export type { PreviewPanelProps } from './PreviewPanel.js';
@@ -293,6 +294,94 @@ export {
 } from './asciiDiagram/asciiDiagramOps.js';
 export { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste.js';
 
+// Complex diagram editor — every explicit `mermaid` fence is rendered through
+// Mermaid's public renderer inside the shared diagram chrome. Flowcharts add
+// source-backed node/edge gestures and the full Mermaid shape catalog; every
+// other diagram family remains lossless render + source editing.
+export {
+  MermaidDiagramExtension,
+  MERMAID_DIAGRAM_KEY,
+  findMermaidDiagramBlockPos,
+  isMermaidDiagramNode,
+  isMermaidSourceVisible,
+  toggleMermaidSource,
+} from './mermaid/MermaidDiagramExtension.js';
+export type {
+  MermaidDiagramBlockEntry,
+  MermaidDiagramExtensionOptions,
+  MermaidDiagramPluginState,
+} from './mermaid/MermaidDiagramExtension.js';
+export { MermaidDiagramWidget } from './mermaid/MermaidDiagramWidget.js';
+export type { MermaidDiagramWidgetProps } from './mermaid/MermaidDiagramWidget.js';
+export { MermaidDiagramCanvas } from './mermaid/MermaidDiagramCanvas.js';
+export type {
+  MermaidDiagramCanvasProps,
+  MermaidNodeCanvasAction,
+} from './mermaid/MermaidDiagramCanvas.js';
+export { useMermaidDiagramData } from './mermaid/mermaidData.js';
+export type { MermaidDiagramData } from './mermaid/mermaidData.js';
+export {
+  renderMermaidDiagram,
+  inspectMermaidSource,
+  mermaidErrorMessage,
+} from './mermaid/mermaidRenderer.js';
+export type { MermaidRenderResult } from './mermaid/mermaidRenderer.js';
+export { MermaidShapePalette } from './mermaid/MermaidShapePalette.js';
+export type { MermaidShapePaletteProps } from './mermaid/MermaidShapePalette.js';
+export {
+  MERMAID_FLOWCHART_SHAPES,
+  isMermaidFlowchartShapeId,
+  normalizeMermaidFlowchartShape,
+} from './mermaid/mermaidShapes.js';
+export type { MermaidFlowchartShape, MermaidFlowchartShapeId } from './mermaid/mermaidShapes.js';
+export type {
+  MermaidEditableEdge,
+  MermaidEditableModel,
+  MermaidEditableNode,
+  MermaidFlowchartDirection,
+  MermaidFlowchartModel,
+} from './mermaid/mermaidModel.js';
+export {
+  DEFAULT_MERMAID_DIAGRAM_TYPE,
+  MERMAID_DIAGRAM_TYPES,
+  mermaidDiagramMarkdown,
+} from './mermaid/mermaidDiagramTypes.js';
+export type {
+  MermaidDiagramCategory,
+  MermaidDiagramPreview,
+  MermaidDiagramType,
+} from './mermaid/mermaidDiagramTypes.js';
+export { MermaidDiagramTypeThumbnail } from './mermaid/MermaidDiagramTypeThumbnail.js';
+
+// Code snippets — every ordinary explicit-language fence is replaced in the
+// WYSIWYG surface by a Monaco inset. The fence node remains authoritative, so
+// edits preserve the exact language tag and source when serialized to Markdown.
+export {
+  CodeSnippetExtension,
+  CODE_SNIPPET_KEY,
+  findCodeSnippetBlockPos,
+  isCodeSnippetNode,
+} from './codeSnippet/CodeSnippetExtension.js';
+export type {
+  CodeSnippetBlockEntry,
+  CodeSnippetExtensionOptions,
+  CodeSnippetPluginState,
+} from './codeSnippet/CodeSnippetExtension.js';
+export { CodeSnippetWidget } from './codeSnippet/CodeSnippetWidget.js';
+export type { CodeSnippetWidgetProps } from './codeSnippet/CodeSnippetWidget.js';
+export { replaceCodeSnippetText } from './codeSnippet/codeSnippetCommands.js';
+export { useCodeSnippetData } from './codeSnippet/codeSnippetData.js';
+export type { CodeSnippetData } from './codeSnippet/codeSnippetData.js';
+export {
+  CODE_SNIPPET_LANGUAGES,
+  codeSnippetFenceLanguageToken,
+  codeSnippetLanguageLabel,
+  codeSnippetMarkdown,
+  isCodeSnippetFenceLanguage,
+  monacoLanguageForFence,
+} from './codeSnippet/codeSnippetLanguages.js';
+export type { CodeSnippetLanguage } from './codeSnippet/codeSnippetLanguages.js';
+
 // Treeview editor — ASCII file-tree / outline fences get an interactive
 // outline widget; edits re-render the tree art (the fence stays the source
 // of truth). Peer to the ASCII diagram editor; mutually exclusive with it

package/src/markdownCodeFence.ts

@@ -0,0 +1,72 @@
+/**
+ * Source-level Markdown fenced-code detection for editor features that cannot
+ * operate on the parsed AST. The returned mask includes opening and closing
+ * fence lines, and an unclosed fence remains active through EOF.
+ */
+
+interface FenceState {
+  marker: '`' | '~';
+  length: number;
+}
+
+const FENCE_RE = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+const CLOSING_FENCE_RE = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
+
+function openingFence(line: string): FenceState | null {
+  const match = FENCE_RE.exec(line);
+  if (!match) return null;
+  const run = match[1];
+  const marker = run[0] as '`' | '~';
+  // CommonMark forbids backticks in a backtick fence's info string.
+  if (marker === '`' && match[2].includes('`')) return null;
+  return { marker, length: run.length };
+}
+
+function isClosingFence(line: string, fence: FenceState): boolean {
+  const match = CLOSING_FENCE_RE.exec(line);
+  return !!match && match[1][0] === fence.marker && match[1].length >= fence.length;
+}
+
+/** One boolean per physical source line; true means the whole line is fenced code. */
+export function markdownFencedCodeLineMask(source: string): boolean[] {
+  const lines = source.split(/\r\n|\r|\n/);
+  const mask: boolean[] = [];
+  let fence: FenceState | null = null;
+
+  for (const line of lines) {
+    if (fence) {
+      mask.push(true);
+      if (isClosingFence(line, fence)) fence = null;
+      continue;
+    }
+
+    const opening = openingFence(line);
+    mask.push(opening != null);
+    fence = opening;
+  }
+
+  return mask;
+}
+
+/** Whether a 1-based physical source line is an opening, body, or closing fence line. */
+export function isMarkdownFencedCodeLine(source: string, lineNumber: number): boolean {
+  if (!Number.isInteger(lineNumber) || lineNumber < 1) return false;
+  return markdownFencedCodeLineMask(source)[lineNumber - 1] ?? false;
+}
+
+/**
+ * Replace fenced-code line contents with spaces while retaining every line
+ * ending and character offset. Raw-source scanners can safely inspect the
+ * result and use any match offsets against the original source.
+ */
+export function maskMarkdownFencedCode(source: string): string {
+  const mask = markdownFencedCodeLineMask(source);
+  let lineIndex = 0;
+  return source
+    .split(/(\r\n|\r|\n)/)
+    .map((part, index) => {
+      if (index % 2 === 1) return part;
+      return mask[lineIndex++] ? ' '.repeat(part.length) : part;
+    })
+    .join('');
+}

package/src/mediaReferences.ts

@@ -1,4 +1,5 @@
 import { splitKeyValueToken, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
+import { maskMarkdownFencedCode } from './markdownCodeFence';
 
 interface MediaReferenceRange {
   start: number;
@@ -32,9 +33,10 @@ const HTML_MEDIA_ATTRS = ['src', 'href', 'poster'] as const;
  */
 export function collectMediaReferencesFromMarkdown(source: string): ReadonlySet<string> {
   const refs = new Set<string>();
-  collectMarkdownInlineReferences(source, refs);
-  collectHtmlAttributeReferences(source, refs);
-  collectAnnotationReferences(source, refs);
+  const searchableSource = maskMarkdownFencedCode(source);
+  collectMarkdownInlineReferences(searchableSource, refs);
+  collectHtmlAttributeReferences(searchableSource, refs);
+  collectAnnotationReferences(searchableSource, refs);
   return refs;
 }