@keboola/design 9.0.0 → 9.1.0

package/dist/editors.cjs

@@ -23,12 +23,11 @@ var r = require('@codemirror/legacy-modes/mode/r');
 var shell = require('@codemirror/legacy-modes/mode/shell');
 var toml = require('@codemirror/legacy-modes/mode/toml');
 var codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
-var codemirrorLangSfsql = require('@keboola/codemirror-lang-sfsql');
+var codemirrorLangSql = require('@keboola/codemirror-lang-sql');
 var colors = require('@keboola/tailwind-config/colors');
 var simpleMode = require('@codemirror/legacy-modes/mode/simple-mode');
 var state = require('@codemirror/state');
 var commands = require('@codemirror/commands');
-var codemirrorLangSql = require('@keboola/codemirror-lang-sql');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1037,6 +1036,7 @@ var LANGUAGE_MODES = [
   "text/x-mysql",
   "text/x-pgsql",
   "text/x-mssql",
+  // Snowflake, under a historical name — these strings are a published prop contract.
   "text/x-sfsql",
   "text/x-plsql",
   "text/x-rsrc",
@@ -1098,8 +1098,6 @@ var ALWAYS_OFF = {
 var buildBasicSetup = (readOnly) => ({
   ...ALWAYS_OFF,
   ...readOnly ? {
-    history: false,
-    historyKeymap: false,
     closeBrackets: false,
     closeBracketsKeymap: false,
     lintKeymap: false,
@@ -1121,20 +1119,6 @@ var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
-var sfsqlWithLanguageData = {
-  ...codemirrorLangSfsql.sfsql,
-  languageData: {
-    ...codemirrorLangSfsql.sfsql.languageData,
-    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
-    autocomplete: autocomplete.completeFromList(
-      Object.keys(codemirrorLangSfsql.modeSpec.keywords).map((label) => ({
-        label: label.toUpperCase(),
-        type: "keyword"
-      }))
-    )
-  }
-};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1151,7 +1135,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.MSSQL });
     case "text/x-sfsql":
-      return language.StreamLanguage.define(sfsqlWithLanguageData);
+      return langSql.sql({ upperCaseKeywords: true, dialect: codemirrorLangSql.getSqlDialect("snowflake") });
     case "text/x-plsql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PLSQL });
     case "text/x-rsrc":
@@ -1413,7 +1397,7 @@ var completeVariables = (variables = []) => {
     return { from: match.to - name.length, options };
   };
 };
-var emptyArray = [];
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 var emptyObject = {};
 var CodeEditor = ({
   value,
@@ -1425,7 +1409,8 @@ var CodeEditor = ({
   searchQuery,
   searchMatchIndex,
   readOnly = false,
-  autocompletions = emptyArray,
+  inputLocked = false,
+  autocompletions,
   completionSource,
   variables,
   extraKeys = emptyObject,
@@ -1461,21 +1446,23 @@ var CodeEditor = ({
     [boundKeysSignature]
   );
   const tooltipLayer = useTooltipsExtension();
-  const variableCompletion = react.useMemo(() => completeVariables(variables), [variables]);
+  const variableCompletion = useVariableCompletion(variables);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
     () => view.EditorView.theme(buildBaseThemeStyles())
   );
   const commonExtensions = react.useMemo(() => {
+    const callerCompletions = completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions?.length ? autocompletions : null);
+    const completionEntries = [
+      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
+      { autocomplete: variableCompletion }
+    ];
     return [
       getLanguageMode(mode),
       shouldLintJson(mode, readOnly) ? lint.linter(langJson.jsonParseLinter()) : [],
       withLineWrapping ? view.EditorView.lineWrapping : [],
-      CodeMirror.EditorState.languageData.of(() => [
-        { autocomplete: completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions) }
-      ]),
-      CodeMirror.EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
+      CodeMirror.EditorState.languageData.of(() => completionEntries),
       view.keymap.of(
         boundKeys.map((key) => ({
           key,
@@ -1516,7 +1503,10 @@ var CodeEditor = ({
       ...commonExtensions,
       view.placeholder(placeholder),
       view.EditorView.editable.of(!readOnly),
-      CodeMirror.EditorState.readOnly.of(readOnly),
+      // The lock is this facet and nothing else. `contenteditable` is what the
+      // read-only wash keys off, and `basicSetup` is what holds the undo history,
+      // so leaving both alone is what makes the lock invisible.
+      CodeMirror.EditorState.readOnly.of(readOnly || inputLocked),
       previousValue ? merge.unifiedMergeView({
         original: previousValue,
         mergeControls: false,
@@ -1524,7 +1514,7 @@ var CodeEditor = ({
         collapseUnchanged: withCollapseUnchanged ? {} : void 0
       }) : []
     ];
-  }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
+  }, [commonExtensions, placeholder, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
   const config = react.useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
@@ -1750,8 +1740,6 @@ var activeQueryHighlight = (splitQueries) => {
     })
   ];
 };
-
-// src/components/CodeEditor/highlighting.ts
 var HighlightMarker = class extends view.GutterMarker {
   toDOM() {
     const marker = document.createElement("div");
@@ -1867,14 +1855,13 @@ var highlightedLinesTheme = view.EditorView.baseTheme({
     backgroundColor: `${colors__default.default.blue[100]} !important`
   }
 });
-function highlightingExtension(queryParser) {
+function highlightingExtension() {
   return [
     highlightedLinesField,
     highlightGutter,
     errorLineDecorations,
     processingLineDecorations,
-    highlightedLinesTheme,
-    ...queryParser ? activeQueryHighlight(queryParser) : []
+    highlightedLinesTheme
   ];
 }
 function updateHighlighting(view, lines) {
@@ -1895,6 +1882,7 @@ var CUSTOM_KEYMAP = [
     }
   }
 ];
+var OWN_KEYMAP_EXTENSION = CodeMirror.keymap.of([...commands.defaultKeymap, ...CUSTOM_KEYMAP]);
 var buildTheme = () => ({
   ...buildBaseThemeStyles(),
   "&.cm-editor": {
@@ -1932,7 +1920,6 @@ var SqlEditor = ({
   searchQuery = "",
   searchMatchIndex,
   readOnly = false,
-  extraKeys,
   queryParser,
   autoFocus = false,
   lineNumbers = true,
@@ -1945,6 +1932,18 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = react.useRef(null);
+  const handleChange = useStableCallback((next) => onChange?.(next));
+  const parseQueries = useStableCallback(async (sql2) => await queryParser?.(sql2) ?? []);
+  const handleBlur = useStableCallback((view) => onBlurEditor?.(view));
+  const handleFocus = useStableCallback((view) => onFocusEditor?.(view));
+  const handleUpdate = useStableCallback((update) => {
+    if (update.selectionSet) {
+      const { main } = update.state.selection;
+      onSelectionChange?.(update.state.sliceDoc(main.from, main.to));
+    }
+  });
+  const variableCompletion = useVariableCompletion(variables);
+  const withQueryParser = queryParser !== void 0;
   const tooltipLayer = useTooltipsExtension();
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const themeExtension = useThemedExtension(
@@ -1952,34 +1951,36 @@ var SqlEditor = ({
     () => CodeMirror.EditorView.theme(buildTheme())
   );
   const extensions = react.useMemo(() => {
-    const baseKeymap = [...commands.defaultKeymap, ...CUSTOM_KEYMAP];
     return [
       CodeMirror.EditorView.lineWrapping,
-      CodeMirror.keymap.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
+      OWN_KEYMAP_EXTENSION,
       ...codemirrorLangSql.installExtensions({
         schema,
         defaultDatabase,
         defaultSchema,
-        variableCompletion: completeVariables(variables),
+        variableCompletion,
         dialect
       }),
       searchExtension(),
-      highlightingExtension(queryParser),
+      highlightingExtension(),
+      withQueryParser ? activeQueryHighlight(parseQueries) : [],
       tooltipLayer,
       themeExtension,
-      onBlurEditor ? CodeMirror.EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? CodeMirror.EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
+      CodeMirror.EditorView.domEventHandlers({
+        blur: (_, view) => handleBlur(view),
+        focus: (_, view) => handleFocus(view)
+      })
     ];
   }, [
-    extraKeys,
-    queryParser,
+    withQueryParser,
+    parseQueries,
     schema,
     defaultDatabase,
     defaultSchema,
-    variables,
+    variableCompletion,
     dialect,
-    onBlurEditor,
-    onFocusEditor,
+    handleBlur,
+    handleFocus,
     themeExtension,
     tooltipLayer
   ]);
@@ -1996,34 +1997,17 @@ var SqlEditor = ({
       updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
     }
   }, [searchQuery, searchMatchIndex]);
-  react.useEffect(() => {
-    if (!onDestroyEditor) return;
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-  const handleOnCreate = react.useCallback(
-    (view, state) => {
-      onCreateEditor?.(view, state);
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex]
-  );
-  const handleOnUpdate = react.useCallback(
-    (update) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange]
-  );
+  const handleDestroy = useStableCallback(() => onDestroyEditor?.());
+  react.useEffect(() => handleDestroy, [handleDestroy]);
+  const handleCreate = useStableCallback((view, state) => {
+    onCreateEditor?.(view, state);
+    if (highlightLines) {
+      updateHighlighting(view, highlightLines);
+    }
+    if (searchQuery) {
+      updateSearch(view, searchQuery, searchMatchIndex);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     CodeMirror__default.default,
     {
@@ -2031,9 +2015,9 @@ var SqlEditor = ({
       theme: customTheme,
       extensions,
       value,
-      onChange,
-      onUpdate: handleOnUpdate,
-      onCreateEditor: handleOnCreate,
+      onChange: handleChange,
+      onUpdate: handleUpdate,
+      onCreateEditor: handleCreate,
       autoFocus,
       placeholder,
       className,