Integrate markdown inline editor by gbro3n · Pull Request #13 · appsoftwareltd/as-notes

gbro3n · 2026-03-26T10:19:14Z

No description provided.

cloudflare-workers-and-pages · 2026-03-26T10:19:19Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	as-notes	`a024f05`	Commit Preview URL Branch Preview URL	Mar 26 2026, 10:19 AM

Copilot

Pull request overview

Integrates an inline Markdown editor experience (syntax shadowing) into the extension, along with updated/bundled Mermaid assets and documentation/licensing updates.

Changes:

Add inline editor user docs (settings + usage) and internal technical documentation.
Include third-party license notices in-repo and copy them into the packaged dist/ output.
Bundle/update Mermaid runtime chunks used by the inline editor/preview pipeline (layouts, rendering, utilities).

Reviewed changes

Copilot reviewed 44 out of 557 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
vs-code-extension/media/mermaid/chunks/mermaid.core/cose-bilkent-S5V4N54A.mjs	Adds cose-bilkent Cytoscape layout/rendering chunk for Mermaid.
vs-code-extension/media/mermaid/chunks/mermaid.core/classDiagram-v2-WZHVMYZB.mjs	Adds class diagram v2 entry chunk for Mermaid.
vs-code-extension/media/mermaid/chunks/mermaid.core/classDiagram-2ON5EDUG.mjs	Adds class diagram entry chunk for Mermaid.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-XAJISQIX.mjs	Adds Mermaid package metadata chunk (deps/version).
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-TZMSLE5B.mjs	Adds SVG drawing helpers (rect/text/image) chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-S3R3BYOJ.mjs	Adds Mermaid core utils chunk (directives, text sizing, URL formatting, etc.).
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-QZHKN3VN.mjs	Adds imperative state helper chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-QXUST7PY.mjs	Adds edge rendering/markers/labels chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-QN33PNHL.mjs	Adds SVG viewport sizing helper chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-N4CR4FBY.mjs	Adds layout loader registry (dagre + cose-bilkent) chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-JA3XYJ7Z.mjs	Adds Markdown/Katex/icon rendering for labels chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-HN2XXSSU.mjs	Adds line-with-offset utilities and marker offsets chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-FMBD7UC4.mjs	Adds global icon styling chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-EXTU4WIE.mjs	Adds sandbox-aware SVG selection helper chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-CVBHYZKI.mjs	Adds subgraph title margin helper chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-ATLVNIR6.mjs	Adds compiled style helpers for shapes/labels chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-AGHRB4JF.mjs	Adds logger shim chunk used across Mermaid runtime.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-55IACEB6.mjs	Adds helper for locating diagram SVG element chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/chunk-4BX2VUAB.mjs	Adds common DB population helper chunk.
vs-code-extension/media/mermaid/chunks/mermaid.core/architectureDiagram-VXUJARFQ.mjs	Adds architecture diagram implementation chunk.
vs-code-extension/media/mermaid/channel-f19f13a4.js	Adds bundled color channel helper (build artifact).
vs-code-extension/media/mermaid/channel-d3ce1aa3.js	Adds bundled color channel helper (build artifact).
vs-code-extension/media/mermaid/array-b7dcf730.js	Adds bundled array helper (build artifact).
vs-code-extension/media/mermaid/array-2ff2c7a6.js	Adds bundled array helper (build artifact).
vs-code-extension/media/mermaid/arc-a15e19dc.js	Adds bundled arc generator (build artifact).
vs-code-extension/media/mermaid/arc-911b4007.js	Adds bundled arc generator (build artifact).
vs-code-extension/media/mermaid/Tableau10-558cc280.js	Adds bundled Tableau10 palette helper (build artifact).
vs-code-extension/media/mermaid/Tableau10-31042135.js	Adds bundled Tableau10 palette helper (build artifact).
vs-code-extension/build.mjs	Copies third-party license notice into dist during build.
vs-code-extension/LICENCE-THIRD-PARTY.md	Adds third-party license notice within extension package scope.
docs-src/docs/Settings.md	Documents inline editor settings.
docs-src/docs/Inline Editor.md	Adds end-user inline editor documentation page.
docs-src/docs/Getting Started.md	Links getting started docs to inline editor docs.
TECHNICAL.md	Adds internal architecture notes for inline editor (syntax shadowing).
README.md	Adds inline editor overview and key settings to README.
LICENCE-THIRD-PARTY.md	Adds third-party license notice at repo root.
CHANGELOG.md	Documents inline editor features + conflict detection in pending release.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T10:21:59Z

+  let styles = styleArray ? styleArray.reduce((acc, style) => acc + ";" + style, "") : "";
+  return styles;


getLabelStyles assumes styleArray is an array (uses .reduce()), but it’s called with edge.labelStyle, which is set to a string earlier (styles2String(edge) returns labelStyles as a string). This will throw at runtime (reduce is not a function) when start/end labels are present. Fix by either (a) making getLabelStyles accept both arrays and strings (return the string unchanged), or (b) stop calling getLabelStyles here and pass edge.labelStyle directly to createLabel_default.

Suggested change

let styles = styleArray ? styleArray.reduce((acc, style) => acc + ";" + style, "") : "";

return styles;

if (!styleArray) {

return "";

}

if (Array.isArray(styleArray)) {

return styleArray.reduce((acc, style) => acc + ";" + style, "");

}

if (typeof styleArray === "string") {

return styleArray;

}

return "";

Copilot · 2026-03-26T10:21:59Z

+    const startLabelElement = await createLabel_default(
+      edge.startLabelLeft,
+      getLabelStyles(edge.labelStyle)
+    );


getLabelStyles assumes styleArray is an array (uses .reduce()), but it’s called with edge.labelStyle, which is set to a string earlier (styles2String(edge) returns labelStyles as a string). This will throw at runtime (reduce is not a function) when start/end labels are present. Fix by either (a) making getLabelStyles accept both arrays and strings (return the string unchanged), or (b) stop calling getLabelStyles here and pass edge.labelStyle directly to createLabel_default.

Copilot · 2026-03-26T10:21:59Z

+    const startEdgeLabelRight = elem.insert("g").attr("class", "edgeTerminals");
+    const inner = startEdgeLabelRight.insert("g").attr("class", "inner");
+    fo = startEdgeLabelRight.node().appendChild(startLabelElement);
+    inner.node().appendChild(startLabelElement);
+    const slBox = startLabelElement.getBBox();


The same DOM node (startLabelElement) is appended twice to two different parents. In the DOM, the second append will move the node, so only the last append 'wins' and fo will reference a node that is no longer under the original parent. This pattern appears in multiple start/end label branches; choose a single parent (typically inner.node()) and append only once, keeping fo consistent with the appended element.

Copilot · 2026-03-26T10:22:00Z

+var drawEmbeddedImage = /* @__PURE__ */ __name((element, x, y, link) => {
+  const imageElement = element.append("use");
+  imageElement.attr("x", x);
+  imageElement.attr("y", y);
+  const sanitizedLink = sanitizeUrl(link);
+  imageElement.attr("xlink:href", `#${sanitizedLink}`);


drawEmbeddedImage uses sanitizeUrl() (meant for URLs) and then forces it into an SVG fragment reference (#...). sanitizeUrl() can return values like about:blank (contains :) or full URLs, which aren’t valid element IDs and will break <use> references. For embedded references, sanitize/normalize to a valid SVG id token (or keep a separate code path that strictly accepts only fragment IDs) rather than treating it as a URL.

Suggested change

var drawEmbeddedImage = /* @__PURE__ */ __name((element, x, y, link) => {

const imageElement = element.append("use");

imageElement.attr("x", x);

imageElement.attr("y", y);

const sanitizedLink = sanitizeUrl(link);

imageElement.attr("xlink:href", `#${sanitizedLink}`);

const sanitizeFragmentId = (link) => {

if (typeof link !== "string") {

return "";

}

let id = link;

const hashIndex = id.lastIndexOf("#");

if (hashIndex !== -1) {

id = id.slice(hashIndex + 1);

}

id = id.trim();

const idPattern = /^[A-Za-z_][A-Za-z0-9_.-]*$/;

if (!idPattern.test(id)) {

return "";

}

return id;

};

var drawEmbeddedImage = /* @__PURE__ */ __name((element, x, y, link) => {

const imageElement = element.append("use");

imageElement.attr("x", x);

imageElement.attr("y", y);

const sanitizedId = sanitizeFragmentId(link);

if (sanitizedId) {

imageElement.attr("xlink:href", `#${sanitizedId}`);

}

Copilot · 2026-03-26T10:22:00Z

+    const rscratch = edge._private.rscratch;
+    const positionedEdge = {
+      id: data.id,
+      source: data.source,
+      target: data.target,
+      startX: rscratch.startX,
+      startY: rscratch.startY,
+      midX: rscratch.midX,
+      midY: rscratch.midY,
+      endX: rscratch.endX,
+      endY: rscratch.endY


This reads edge._private.rscratch, which is an internal Cytoscape implementation detail and can change between Cytoscape versions or layouts, creating brittle behavior. Prefer a public API to derive edge geometry (e.g., edge.sourceEndpoint(), edge.targetEndpoint(), and edge.midpoint() if available in your Cytoscape build), or store the needed points in a supported scratchpad/public field during layout execution instead of accessing _private.

Suggested change

const rscratch = edge._private.rscratch;

const positionedEdge = {

id: data.id,

source: data.source,

target: data.target,

startX: rscratch.startX,

startY: rscratch.startY,

midX: rscratch.midX,

midY: rscratch.midY,

endX: rscratch.endX,

endY: rscratch.endY

const sourcePoint = edge.sourceEndpoint();

const targetPoint = edge.targetEndpoint();

const midPoint = typeof edge.midpoint === "function"

? edge.midpoint()

: {

x: (sourcePoint.x + targetPoint.x) / 2,

y: (sourcePoint.y + targetPoint.y) / 2

};

const positionedEdge = {

id: data.id,

source: data.source,

target: data.target,

startX: sourcePoint.x,

startY: sourcePoint.y,

midX: midPoint.x,

midY: midPoint.y,

endX: targetPoint.x,

endY: targetPoint.y

Copilot · 2026-03-26T10:22:00Z

+    const renderEl = select("body").append("div").attr("id", "cy").attr("style", "display:none");
+    const cy = cytoscape({
+      container: document.getElementById("cy"),
+      // container to render in
+      style: [
+        {
+          selector: "edge",
+          style: {
+            "curve-style": "bezier"
+          }
+        }
+      ]
+    });
+    renderEl.remove();
+    addNodes(data.nodes, cy);
+    addEdges(data.edges, cy);


The temporary Cytoscape container is removed immediately after creating the instance. Some Cytoscape layouts/plugins rely on the container being present (even if hidden) for size/geometry calculations and event timing, which can cause nondeterministic layouts across environments. Consider either keeping the container until after layout completion/ready, or initialize Cytoscape in a supported headless mode (if compatible with the layout/plugin) to avoid DOM coupling.

Copilot · 2026-03-26T10:22:00Z

+// Copy third-party licence notice to dist/
+copyFileSync(
+    resolve(__dirname, 'LICENCE-THIRD-PARTY.md'),


There are now two LICENCE-THIRD-PARTY.md files (repo root and vs-code-extension/LICENCE-THIRD-PARTY.md). This duplication is likely to drift over time. Consider keeping a single source of truth (e.g., only at repo root) and copying that into dist/, or generating the packaged notice from a shared path to ensure both locations stay identical.

Suggested change

// Copy third-party licence notice to dist/

copyFileSync(

resolve(__dirname, 'LICENCE-THIRD-PARTY.md'),

// Copy third-party licence notice from repo root to dist/

copyFileSync(

resolve(__dirname, '..', 'LICENCE-THIRD-PARTY.md'),

gbro3n added 5 commits March 25, 2026 20:34

Inline editing implementation progress

9e12bd7

Text decorations applying

39db880

TECHNICAL.md update

16bfa1f

Outliner bullets participate in inline markdown styling

ec45318

Licences and activation paths

a024f05

Copilot AI review requested due to automatic review settings March 26, 2026 10:19

gbro3n merged commit a9d552e into main Mar 26, 2026
6 checks passed

Copilot AI reviewed Mar 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate markdown inline editor#13

Integrate markdown inline editor#13
gbro3n merged 5 commits intomainfrom
integrate-markdown-inline-editor

gbro3n commented Mar 26, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		let styles = styleArray ? styleArray.reduce((acc, style) => acc + ";" + style, "") : "";
		return styles;

-  let styles = styleArray ? styleArray.reduce((acc, style) => acc + ";" + style, "") : "";
-  return styles;
+  if (!styleArray) {
+    return "";
+  }
+  if (Array.isArray(styleArray)) {
+    return styleArray.reduce((acc, style) => acc + ";" + style, "");
+  }
+  if (typeof styleArray === "string") {
+    return styleArray;
+  }
+  return "";

-var drawEmbeddedImage = /* @__PURE__ */ __name((element, x, y, link) => {
-  const imageElement = element.append("use");
-  imageElement.attr("x", x);
-  imageElement.attr("y", y);
-  const sanitizedLink = sanitizeUrl(link);
-  imageElement.attr("xlink:href", `#${sanitizedLink}`);
+const sanitizeFragmentId = (link) => {
+  if (typeof link !== "string") {
+    return "";
+  }
+  let id = link;
+  const hashIndex = id.lastIndexOf("#");
+  if (hashIndex !== -1) {
+    id = id.slice(hashIndex + 1);
+  }
+  id = id.trim();
+  const idPattern = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
+  if (!idPattern.test(id)) {
+    return "";
+  }
+  return id;
+};
+var drawEmbeddedImage = /* @__PURE__ */ __name((element, x, y, link) => {
+  const imageElement = element.append("use");
+  imageElement.attr("x", x);
+  imageElement.attr("y", y);
+  const sanitizedId = sanitizeFragmentId(link);
+  if (sanitizedId) {
+    imageElement.attr("xlink:href", `#${sanitizedId}`);
+  }

Conversation

gbro3n commented Mar 26, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026

Deploying with Cloudflare Workers

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants