@mittwald/flow-react-components 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n }\n\n &.folded {\n :global(.cm-content) {\n max-height: var(--max-height);\n overflow: hidden;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: 50%;\n pointer-events: none;\n background: linear-gradient(\n to bottom,\n transparent,\n var(--code-block--background-color)\n );\n }\n }\n }\n\n &.codeBlock div:global(.flow--code-editor--code-mirror) {\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) * -1);\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n }\n\n &.folded {\n :global(.cm-content) {\n max-height: var(--max-height);\n overflow: hidden;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: 50%;\n pointer-events: none;\n background: linear-gradient(\n to bottom,\n transparent,\n var(--code-block--background-color)\n );\n }\n }\n }\n\n /* A code block is not an input – both axes use its own padding. */\n &.codeBlock div:global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) * -1);\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}
@@ -7,6 +7,13 @@ import { foldGutter } from "@codemirror/language";
7
7
  import { lintGutter } from "@codemirror/lint";
8
8
  import { indentationMarkers } from "@replit/codemirror-indentation-markers";
9
9
  //#region src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx
10
+ var markerColor = "var(--code-editor--indentation-marker-color)";
11
+ var indentationMarkerColors = {
12
+ light: markerColor,
13
+ dark: markerColor,
14
+ activeLight: markerColor,
15
+ activeDark: markerColor
16
+ };
10
17
  /** @internal */
11
18
  var useCodeEditorExtensions = (language, extensions = [], options = {
12
19
  showCodeFolding: true,
@@ -24,7 +31,7 @@ var useCodeEditorExtensions = (language, extensions = [], options = {
24
31
  } }));
25
32
  if (options.showLinterMarkers) extensions.push(lintGutter());
26
33
  if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) extensions.push(gutterSpacer());
27
- if (options.showCodeIndentationMakers) extensions.push(indentationMarkers());
34
+ if (options.showCodeIndentationMakers) extensions.push(indentationMarkers({ colors: indentationMarkerColors }));
28
35
  if (language) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
29
36
  return extensions;
30
37
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n type CodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/** @internal */\nexport interface CodeEditorSetup {\n /**\n * Whether the line the cursor is on is highlighted.\n *\n * @default true\n */\n showActiveLineMarker?: boolean;\n /**\n * Whether the gutter offers controls to fold and unfold code blocks.\n *\n * @default true\n */\n showCodeFolding?: boolean;\n /**\n * Whether indentation levels are visualized with guide lines.\n *\n * @default true\n */\n showCodeIndentationMakers?: boolean;\n /**\n * Whether line numbers are shown in the gutter.\n *\n * @default true\n */\n showLineNumbers?: boolean;\n /**\n * Whether linter results are shown in the gutter.\n *\n * @default true\n */\n showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n language?: CodeEditorLanguage,\n extensions: Extension[] = [],\n options: CodeEditorSetup = {\n showCodeFolding: true,\n showCodeIndentationMakers: true,\n showLineNumbers: true,\n showLinterMarkers: true,\n },\n) => {\n if (options.showLineNumbers) {\n extensions.push(lineNumbers());\n }\n\n if (options.showCodeFolding) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const element = document.createElement(\"span\");\n element.classList.add(\"cm-foldGutter\");\n element.classList.add(\n open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n );\n element.innerText = open ? \"⌄\" : \"›\";\n return element;\n },\n }),\n );\n }\n\n if (options.showLinterMarkers) {\n extensions.push(lintGutter());\n }\n\n if (\n options.showLineNumbers &&\n (!options.showCodeFolding || !options.showLinterMarkers)\n ) {\n extensions.push(gutterSpacer());\n }\n\n if (options.showCodeIndentationMakers) {\n extensions.push(indentationMarkers());\n }\n\n if (language) {\n supportedCodeEditorLanguages[language]?.map((loader) =>\n extensions.push(loader()),\n );\n }\n\n return extensions;\n};\n"],"mappings":";;;;;;;;;;AA4CA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,CAAC;CAGtC,IAAI,UACF,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}
1
+ {"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n type CodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/*\n * Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n */\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n light: markerColor,\n dark: markerColor,\n activeLight: markerColor,\n activeDark: markerColor,\n};\n\n/** @internal */\nexport interface CodeEditorSetup {\n /**\n * Whether the line the cursor is on is highlighted.\n *\n * @default true\n */\n showActiveLineMarker?: boolean;\n /**\n * Whether the gutter offers controls to fold and unfold code blocks.\n *\n * @default true\n */\n showCodeFolding?: boolean;\n /**\n * Whether indentation levels are visualized with guide lines.\n *\n * @default true\n */\n showCodeIndentationMakers?: boolean;\n /**\n * Whether line numbers are shown in the gutter.\n *\n * @default true\n */\n showLineNumbers?: boolean;\n /**\n * Whether linter results are shown in the gutter.\n *\n * @default true\n */\n showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n language?: CodeEditorLanguage,\n extensions: Extension[] = [],\n options: CodeEditorSetup = {\n showCodeFolding: true,\n showCodeIndentationMakers: true,\n showLineNumbers: true,\n showLinterMarkers: true,\n },\n) => {\n if (options.showLineNumbers) {\n extensions.push(lineNumbers());\n }\n\n if (options.showCodeFolding) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const element = document.createElement(\"span\");\n element.classList.add(\"cm-foldGutter\");\n element.classList.add(\n open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n );\n element.innerText = open ? \"⌄\" : \"›\";\n return element;\n },\n }),\n );\n }\n\n if (options.showLinterMarkers) {\n extensions.push(lintGutter());\n }\n\n if (\n options.showLineNumbers &&\n (!options.showCodeFolding || !options.showLinterMarkers)\n ) {\n extensions.push(gutterSpacer());\n }\n\n if (options.showCodeIndentationMakers) {\n extensions.push(indentationMarkers({ colors: indentationMarkerColors }));\n }\n\n if (language) {\n supportedCodeEditorLanguages[language]?.map((loader) =>\n extensions.push(loader()),\n );\n }\n\n return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;AAqCA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,UACF,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}
@@ -11,7 +11,8 @@ var defaultLightTheme = githubLightInit({
11
11
  foreground: "var(--form-control--content-color--default)",
12
12
  background: "transparent",
13
13
  gutterBackground: "var(--form-control--background-color--default)",
14
- gutterForeground: "var(--form-control--content-color--default)"
14
+ gutterForeground: "var(--form-control--content-color--default)",
15
+ gutterBorder: "var(--code-editor--gutter-separator-color)"
15
16
  },
16
17
  styles: [
17
18
  {
@@ -1 +1 @@
1
- {"version":3,"file":"defaultEditorTheme.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size)\",\n fontFamily: \"var(--code-editor--font-family)\",\n foreground: \"var(--form-control--content-color--default)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--form-control--content-color--default)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className, t.tagName],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"mappings":";;;;;AAGA,IAAa,oBAAoB,gBAAgB;CAC/C,OAAO;CACP,UAAU;EACR,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,kBAAkB;CACpB;CACA,QAAQ;EACN;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK;IAAC,KAAE;IAAU,KAAE;IAAW,KAAE;GAAO;GACxC,OAAO;EACT;EACA;GAAE,KAAK,KAAE;GAAc,OAAO;EAAsC;EACpE;GACE,KAAK,CAAC,KAAE,cAAc,KAAE,aAAa;GACrC,OAAO;EACT;EACA;GAAE,KAAK,CAAC,KAAE,QAAQ,KAAE,MAAM;GAAG,OAAO;EAAoC;EACxE;GAAE,KAAK,KAAE;GAAQ,OAAO;EAAoC;EAC5D;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK,CAAC,KAAE,SAAS,KAAE,YAAY,GAAG,KAAE,SAAS,KAAE,YAAY,CAAC;GAC5D,OAAO;EACT;EACA;GACE,KAAK,CAAC,KAAE,UAAU,KAAE,YAAY;GAChC,OAAO;EACT;EACA;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;CAChE;AACF,CAAC"}
1
+ {"version":3,"file":"defaultEditorTheme.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size)\",\n fontFamily: \"var(--code-editor--font-family)\",\n foreground: \"var(--form-control--content-color--default)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--form-control--content-color--default)\",\n gutterBorder: \"var(--code-editor--gutter-separator-color)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className, t.tagName],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"mappings":";;;;;AAGA,IAAa,oBAAoB,gBAAgB;CAC/C,OAAO;CACP,UAAU;EACR,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;CAChB;CACA,QAAQ;EACN;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK;IAAC,KAAE;IAAU,KAAE;IAAW,KAAE;GAAO;GACxC,OAAO;EACT;EACA;GAAE,KAAK,KAAE;GAAc,OAAO;EAAsC;EACpE;GACE,KAAK,CAAC,KAAE,cAAc,KAAE,aAAa;GACrC,OAAO;EACT;EACA;GAAE,KAAK,CAAC,KAAE,QAAQ,KAAE,MAAM;GAAG,OAAO;EAAoC;EACxE;GAAE,KAAK,KAAE;GAAQ,OAAO;EAAoC;EAC5D;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK,CAAC,KAAE,SAAS,KAAE,YAAY,GAAG,KAAE,SAAS,KAAE,YAAY,CAAC;GAC5D,OAAO;EACT;EACA;GACE,KAAK,CAAC,KAAE,UAAU,KAAE,YAAY;GAChC,OAAO;EACT;EACA;GAAE,KAAK,KAAE;GAAS,OAAO;EAAqC;CAChE;AACF,CAAC"}
@@ -13347,6 +13347,38 @@ var all_dark_default = {
13347
13347
  "type": "gutter-element-min-width"
13348
13348
  },
13349
13349
  "path": ["code-editor", "gutter-element-min-width"]
13350
+ },
13351
+ "gutter-separator-color": {
13352
+ "key": "{code-editor.gutter-separator-color}",
13353
+ "value": "#8FA1B4",
13354
+ "filePath": "src/form/code-editor.yml",
13355
+ "isSource": true,
13356
+ "original": {
13357
+ "value": "{separator.color}",
13358
+ "key": "{code-editor.gutter-separator-color}"
13359
+ },
13360
+ "name": "CodeEditorGutterSeparatorColor",
13361
+ "attributes": {
13362
+ "category": "code-editor",
13363
+ "type": "gutter-separator-color"
13364
+ },
13365
+ "path": ["code-editor", "gutter-separator-color"]
13366
+ },
13367
+ "indentation-marker-color": {
13368
+ "key": "{code-editor.indentation-marker-color}",
13369
+ "value": "#5E6C7A",
13370
+ "filePath": "src/form/code-editor.yml",
13371
+ "isSource": true,
13372
+ "original": {
13373
+ "value": "{neutral.color.400}",
13374
+ "key": "{code-editor.indentation-marker-color}"
13375
+ },
13376
+ "name": "CodeEditorIndentationMarkerColor",
13377
+ "attributes": {
13378
+ "category": "code-editor",
13379
+ "type": "indentation-marker-color"
13380
+ },
13381
+ "path": ["code-editor", "indentation-marker-color"]
13350
13382
  }
13351
13383
  },
13352
13384
  "date-picker": {