@expressive-code/plugin-collapsible-sections - npm Package Compare versions

Comparing version 0.32.4 to 0.33.0

dist/index.d.ts

@@ -16,7 +16,6 @@ import { ExpressiveCodeLine, PluginTexts, ExpressiveCodePlugin, AttachedPluginData } from '@expressive-code/core';
     /**
-     * The padding of closed sections.
-     * @default
-     * ({ resolveSetting }) => `4px 0 4px ${resolveSetting('codePaddingInline')}`
+     * The block padding of closed sections.
+     * @default '4px'
      */
-    closedPadding: string;
+    closedPaddingBlock: string;
     /**
@@ -86,2 +85,15 @@ * The margin around closed sections.
 
+interface PluginCollapsibleSectionsProps {
+    /**
+     * Collapses the given line range or ranges.
+     */
+    collapse: string | string[];
+    /**
+     * Determines if collapsed section titles (`X collapsed lines`) should be indented
+     * to preserve the minimum indent level of their contained collapsed code lines.
+     *
+     * @default true
+     */
+    collapsePreserveIndent: boolean;
+}
 declare module '@expressive-code/core' {
@@ -92,2 +104,6 @@ interface StyleSettings {
 }
+declare module '@expressive-code/core' {
+    interface ExpressiveCodeBlockProps extends PluginCollapsibleSectionsProps {
+    }
+}
 declare const pluginCollapsibleSectionsTexts: PluginTexts<{
@@ -101,2 +117,2 @@ collapsedLines: string;
 
-export { pluginCollapsibleSections, pluginCollapsibleSectionsData, pluginCollapsibleSectionsTexts };
+export { CollapsibleSectionsStyleSettings, PluginCollapsibleSectionsProps, pluginCollapsibleSections, pluginCollapsibleSectionsData, pluginCollapsibleSectionsTexts };

dist/index.js

 // src/index.ts
-import { AttachedPluginData, PluginTexts, replaceDelimitedValues, cssVarReplacements } from "@expressive-code/core";
+import { AttachedPluginData, PluginTexts, cssVarReplacements } from "@expressive-code/core";
 
@@ -30,6 +30,7 @@ // src/utils.ts
 // src/ast.ts
+import { formatTemplate, setInlineStyle } from "@expressive-code/core";
 import { h, s } from "hastscript";
 
 // src/styles.ts
-import { PluginStyleSettings, setAlpha } from "@expressive-code/core";
+import { PluginStyleSettings, codeLineClass, setAlpha } from "@expressive-code/core";
 var collapsibleSectionClass = "ec-section";
@@ -40,3 +41,3 @@ var collapsibleSectionsStyleSettings = new PluginStyleSettings({
       closedBorderWidth: "0",
-      closedPadding: ({ resolveSetting }) => `4px 0 4px ${resolveSetting("codePaddingInline")}`,
+      closedPaddingBlock: "4px",
       closedMargin: "0",
@@ -93,4 +94,8 @@ closedFontFamily: "inherit",
 				box-shadow: inset 0 calc(-1 * var(--border-width)) var(--border-color), inset 0 var(--border-width) var(--border-color);
-				padding: ${cssVar("collapsibleSections.closedPadding")};
 				margin: ${cssVar("collapsibleSections.closedMargin")};
+
+				.${codeLineClass} .code {
+					padding-block: ${cssVar("collapsibleSections.closedPaddingBlock")};
+					text-indent: 0;
+				}
 			}
@@ -117,4 +122,9 @@
 // src/ast.ts
-import { formatTemplate } from "@expressive-code/core";
-function sectionizeAst({ lines, sections, text }) {
+function sectionizeAst({
+  codeBlock,
+  lines,
+  sections,
+  text,
+  renderEmptyLine
+}) {
   const outp = [...lines];
@@ -124,10 +134,19 @@ const collapsedIconD = "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z";
     const targetLines = lines.slice(from - 1, to);
-    const $details = h("details", { class: collapsibleSectionClass }, [
-      h("summary", [
-        s("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16" }, [s("path", { d: collapsedIconD })]),
-        formatTemplate(text, { lineCount: targetLines.length })
-      ]),
-      ...targetLines
-    ]);
-    outp.splice(from - 1, targetLines.length, $details);
+    const summaryLine = renderEmptyLine();
+    summaryLine.codeWrapper.children.push(
+      s("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16" }, [s("path", { d: collapsedIconD })]),
+      { type: "text", value: formatTemplate(text, { lineCount: targetLines.length }) }
+    );
+    const summary = h("summary", [summaryLine.lineAst]);
+    const details = h("details", { class: collapsibleSectionClass }, [summary, ...targetLines]);
+    if (codeBlock.props.collapsePreserveIndent !== false) {
+      const minIndent = codeBlock.getLines(from - 1, to).reduce((acc, line) => {
+        if (line.text.trim().length === 0)
+          return acc;
+        return Math.min(acc, line.text.match(/^\s*/)?.[0].length ?? 0);
+      }, Infinity);
+      if (minIndent > 0 && minIndent < Infinity)
+        setInlineStyle(summaryLine.lineAst, "--ecIndent", `${minIndent}ch`);
+    }
+    outp.splice(from - 1, targetLines.length, details);
   });
@@ -152,20 +171,18 @@ return outp;
       preprocessMetadata: ({ codeBlock }) => {
-        codeBlock.meta = replaceDelimitedValues(
-          codeBlock.meta,
-          ({ fullMatch, key, value }) => {
-            if (key !== "collapse")
-              return fullMatch;
-            const sections = parseSections(value);
-            sections.forEach((section) => {
-              section.lines.push(...codeBlock.getLines(section.from - 1, section.to));
-            });
-            const data = pluginCollapsibleSectionsData.getOrCreateFor(codeBlock);
-            data.sections = sections;
-            return "";
-          },
-          {
-            valueDelimiters: ['"', "'", "{...}"],
-            keyValueSeparator: "="
-          }
-        );
+        const toArray = (value) => {
+          if (value === void 0)
+            return [];
+          return Array.isArray(value) ? value : [value];
+        };
+        codeBlock.props.collapsePreserveIndent = codeBlock.metaOptions.getBoolean("collapsePreserveIndent") ?? codeBlock.props.collapsePreserveIndent;
+        const ranges = [...toArray(codeBlock.props.collapse), ...codeBlock.metaOptions.getRanges("collapse")];
+        codeBlock.props.collapse = ranges;
+        if (!ranges)
+          return;
+        const sections = parseSections(ranges.join(","));
+        sections.forEach((section) => {
+          section.lines.push(...codeBlock.getLines(section.from - 1, section.to));
+        });
+        const data = pluginCollapsibleSectionsData.getOrCreateFor(codeBlock);
+        data.sections = sections;
       },
@@ -188,3 +205,3 @@ annotateCode: ({ codeBlock }) => {
       },
-      postprocessRenderedBlock: ({ codeBlock, renderData, locale }) => {
+      postprocessRenderedBlock: ({ codeBlock, renderData, renderEmptyLine, locale }) => {
         const data = pluginCollapsibleSectionsData.getOrCreateFor(codeBlock);
@@ -197,5 +214,7 @@ if (!data.sections.length)
         codeAst.children = sectionizeAst({
+          codeBlock,
           lines: codeAst.children,
           sections: data.sections,
-          text: pluginCollapsibleSectionsTexts.get(locale).collapsedLines
+          text: pluginCollapsibleSectionsTexts.get(locale).collapsedLines,
+          renderEmptyLine
         });
@@ -202,0 +221,0 @@ }

package.json

 {
   "name": "@expressive-code/plugin-collapsible-sections",
-  "version": "0.32.4",
+  "version": "0.33.0",
   "description": "Collapsible sections plugin for Expressive Code. Allows code sections to be marked as collapsible.",
@@ -26,3 +26,3 @@ "keywords": [],
   "dependencies": {
-    "@expressive-code/core": "^0.32.4",
+    "@expressive-code/core": "^0.33.0",
     "hastscript": "^7.2.0",
@@ -32,7 +32,7 @@ "hast-util-select": "^5.0.5"
   "devDependencies": {
-    "@expressive-code/plugin-shiki": "^0.32.4",
-    "@expressive-code/plugin-text-markers": "^0.32.4",
+    "@expressive-code/plugin-shiki": "^0.33.0",
+    "@expressive-code/plugin-text-markers": "^0.33.0",
     "hast-util-to-text": "^3.1.2",
     "@types/hast": "^2.3.4",
-    "@internal/test-utils": "^0.2.25"
+    "@internal/test-utils": "^0.2.26"
   },
@@ -39,0 +39,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64265

increased by12.89%

Lines of code

556

increased by10.32%

Dependency changes

• + Added@expressive-code/core@0.33.5(transitive)

• - Removed@expressive-code/core@0.32.4(transitive)

• Updated@expressive-code/core@^0.33.0