@sanity/code-input 2.29.3 → 2.29.4-purple-unicorn.509

package/lib/_CodeInput-1b58302e.js

@@ -0,0 +1,893 @@
+import React, { useRef, useImperativeHandle, useCallback, useEffect } from 'react';
+import { ChangeIndicatorProvider, FormFieldSet, FormField } from '@sanity/base/_unstable';
+import { PatchEvent, setIfMissing, set, unset } from '@sanity/base/form';
+import { Card, Stack, Select, TextInput } from '@sanity/ui';
+import * as PathUtils from '@sanity/util/paths';
+import AceEditor from 'react-ace';
+import styled, { css } from 'styled-components';
+import { useId } from '@reach/auto-id';
+import 'ace-builds/src-noconflict/mode-batchfile';
+import 'ace-builds/src-noconflict/mode-csharp';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/mode-golang';
+import 'ace-builds/src-noconflict/mode-html';
+import 'ace-builds/src-noconflict/mode-java';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/mode-jsx';
+import 'ace-builds/src-noconflict/mode-markdown';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/mode-php';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/mode-ruby';
+import 'ace-builds/src-noconflict/mode-sass';
+import 'ace-builds/src-noconflict/mode-scss';
+import 'ace-builds/src-noconflict/mode-sh';
+import 'ace-builds/src-noconflict/mode-text';
+import 'ace-builds/src-noconflict/mode-tsx';
+import 'ace-builds/src-noconflict/mode-typescript';
+import 'ace-builds/src-noconflict/mode-xml';
+import 'ace-builds/src-noconflict/mode-yaml';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-terminal';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+
+const highlightMarkersCSS = css `
+  .ace_editor_markers_highlight {
+    position: absolute;
+    background-color: ${({ theme }) => theme.sanity.color.solid.primary.enabled.bg};
+    opacity: 0.2;
+    width: 100% !important;
+    border-radius: 0 !important;
+  }
+`;
+function createHighlightMarkers(rows) {
+    return rows.map((row) => ({
+        startRow: Number(row) - 1,
+        startCol: 0,
+        endRow: Number(row) - 1,
+        endCol: +Infinity,
+        className: 'ace_editor_markers_highlight',
+        type: 'screenLine',
+        inFront: true,
+    }));
+}
+
+/* eslint-disable no-undef */
+// Grammar from https://github.com/sanity-io/vscode-sanity
+const rules = {
+    start: [
+        {
+            include: '#query',
+        },
+        {
+            include: '#value',
+        },
+        {
+            include: '#pair',
+        },
+    ],
+    '#query': [
+        {
+            include: '#nullary-access-operator',
+        },
+        {
+            include: '#arraylike',
+        },
+        {
+            include: '#pipe',
+        },
+        {
+            include: '#sort-order',
+        },
+        {
+            include: '#filter',
+        },
+    ],
+    '#variable': [
+        {
+            token: 'variable.other.groq',
+            regex: /\$[_A-Za-z][_0-9A-Za-z]*/,
+        },
+    ],
+    '#keyword': [
+        {
+            token: 'keyword.other.groq',
+            regex: /\b(?:asc|desc|in|match)\b/,
+        },
+    ],
+    '#comparison': [
+        {
+            token: 'keyword.operator.comparison.groq',
+            // eslint-disable-next-line no-div-regex
+            regex: /==|!=|>=|<=|<!=>|<|>/,
+        },
+    ],
+    '#operator': [
+        {
+            token: 'keyword.operator.arithmetic.groq',
+            regex: /\+|-|\*{1,2}|\/|%/,
+        },
+    ],
+    '#pipe': [
+        {
+            token: 'keyword.operator.pipe.groq',
+            regex: /\|/,
+        },
+    ],
+    '#logical': [
+        {
+            token: 'keyword.operator.logical.groq',
+            regex: /!|&&|\|\|/,
+        },
+    ],
+    '#reference': [
+        {
+            token: 'keyword.operator.reference.groq',
+            regex: /->/,
+        },
+    ],
+    '#pair': [
+        {
+            include: '#identifier',
+        },
+        {
+            include: '#value',
+        },
+        {
+            include: '#filter',
+        },
+        {
+            token: 'keyword.operator.pair.groq',
+            regex: /[=]>/,
+        },
+    ],
+    '#arraylike': [
+        {
+            token: 'punctuation.definition.bracket.begin.groq',
+            regex: /\[/,
+            push: [
+                {
+                    token: ['text', 'keyword.operator.descendant.groq'],
+                    regex: /(\])((?:\s*\.)?)/,
+                    next: 'pop',
+                },
+                {
+                    include: '#range',
+                },
+                {
+                    include: '#filter',
+                },
+                {
+                    include: '#array-values',
+                },
+            ],
+        },
+    ],
+    '#array': [
+        {
+            token: 'punctuation.definition.bracket.begin.groq',
+            regex: /\[/,
+            push: [
+                {
+                    token: 'punctuation.definition.bracket.end.groq',
+                    regex: /\]/,
+                    next: 'pop',
+                },
+                {
+                    include: '#array-values',
+                },
+                {
+                    defaultToken: 'meta.structure.array.groq',
+                },
+            ],
+        },
+    ],
+    '#range': [
+        {
+            token: [
+                'meta.structure.range.groq',
+                'constant.numeric.groq',
+                'meta.structure.range.groq',
+                'keyword.operator.range.groq',
+                'meta.structure.range.groq',
+                'constant.numeric.groq',
+                'meta.structure.range.groq',
+            ],
+            regex: /(\s*)(\d+)(\s*)(\.{2,3})(\s*)(\d+)(\s*)/,
+        },
+    ],
+    '#spread': [
+        {
+            token: 'punctuation.definition.spread.begin.groq',
+            regex: /\.\.\./,
+            push: [
+                {
+                    include: '#array',
+                },
+                {
+                    include: '#function-call',
+                },
+                {
+                    include: '#projection',
+                },
+                {
+                    token: 'punctuation.definition.spread.end.groq',
+                    regex: /(?=.)/,
+                    next: 'pop',
+                },
+                {
+                    defaultToken: 'meta.structure.spread.groq',
+                },
+            ],
+        },
+    ],
+    '#array-values': [
+        {
+            include: '#value',
+        },
+        {
+            include: '#spread',
+        },
+        {
+            token: 'punctuation.separator.array.groq',
+            regex: /,/,
+        },
+        {
+            token: 'invalid.illegal.expected-array-separator.groq',
+            regex: /[^\s\]]/,
+        },
+    ],
+    '#filter': [
+        {
+            include: '#function-call',
+        },
+        {
+            include: '#keyword',
+        },
+        {
+            include: '#constant',
+        },
+        {
+            include: '#identifier',
+        },
+        {
+            include: '#value',
+        },
+        {
+            include: '#comparison',
+        },
+        {
+            include: '#operator',
+        },
+        {
+            include: '#logical',
+        },
+    ],
+    '#comments': [
+        {
+            token: ['punctuation.definition.comment.groq', 'comment.line.double-slash.js'],
+            regex: /(\/\/)(.*$)/,
+        },
+    ],
+    '#nullary-access-operator': [
+        {
+            token: 'constant.language.groq',
+            regex: /[*@^]/,
+        },
+    ],
+    '#constant': [
+        {
+            token: 'constant.language.groq',
+            regex: /\b(?:true|false|null)\b/,
+        },
+    ],
+    '#number': [
+        {
+            token: 'constant.numeric.groq',
+            regex: /-?(?:0|[1-9]\d*)(?:(?:\.\d+)?(?:[eE][+-]?\d+)?)?/,
+        },
+    ],
+    '#named-projection': [
+        {
+            include: '#identifier',
+        },
+        {
+            include: '#objectkey',
+        },
+        {
+            include: '#projection',
+        },
+    ],
+    '#projection': [
+        {
+            token: 'punctuation.definition.projection.begin.groq',
+            regex: /\{/,
+            push: [
+                {
+                    token: 'punctuation.definition.projection.end.groq',
+                    regex: /\}/,
+                    next: 'pop',
+                },
+                {
+                    include: '#identifier',
+                },
+                {
+                    include: '#objectkey',
+                },
+                {
+                    include: '#named-projection',
+                },
+                {
+                    include: '#comments',
+                },
+                {
+                    include: '#spread',
+                },
+                {
+                    include: '#pair',
+                },
+                {
+                    token: 'punctuation.separator.projection.key-value.groq',
+                    regex: /:/,
+                    push: [
+                        {
+                            token: 'punctuation.separator.projection.pair.groq',
+                            regex: /,|(?=\})/,
+                            next: 'pop',
+                        },
+                        {
+                            include: '#nullary-access-operator',
+                        },
+                        {
+                            include: '#arraylike',
+                        },
+                        {
+                            include: '#value',
+                        },
+                        {
+                            include: '#spread',
+                        },
+                        {
+                            include: '#identifier',
+                        },
+                        {
+                            include: '#operator',
+                        },
+                        {
+                            include: '#comparison',
+                        },
+                        {
+                            include: '#pair',
+                        },
+                        {
+                            token: 'invalid.illegal.expected-projection-separator.groq',
+                            regex: /[^\s,]/,
+                        },
+                        {
+                            defaultToken: 'meta.structure.projection.value.groq',
+                        },
+                    ],
+                },
+                {
+                    token: 'invalid.illegal.expected-projection-separator.groq',
+                    regex: /[^\s},]/,
+                },
+                {
+                    defaultToken: 'meta.structure.projection.groq',
+                },
+            ],
+        },
+    ],
+    '#string': [
+        {
+            include: '#single-string',
+        },
+        {
+            include: '#double-string',
+        },
+    ],
+    '#double-string': [
+        {
+            token: 'punctuation.definition.string.begin.groq',
+            regex: /"/,
+            push: [
+                {
+                    token: 'punctuation.definition.string.end.groq',
+                    regex: /"/,
+                    next: 'pop',
+                },
+                {
+                    include: '#stringcontent',
+                },
+                {
+                    defaultToken: 'string.quoted.double.groq',
+                },
+            ],
+        },
+    ],
+    '#single-string': [
+        {
+            token: 'punctuation.definition.string.single.begin.groq',
+            regex: /'/,
+            push: [
+                {
+                    token: 'punctuation.definition.string.single.end.groq',
+                    regex: /'/,
+                    next: 'pop',
+                },
+                {
+                    include: '#stringcontent',
+                },
+                {
+                    defaultToken: 'string.quoted.single.groq',
+                },
+            ],
+        },
+    ],
+    '#objectkey': [
+        {
+            include: '#string',
+        },
+    ],
+    '#stringcontent': [
+        {
+            token: 'constant.character.escape.groq',
+            regex: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/,
+        },
+        {
+            token: 'invalid.illegal.unrecognized-string-escape.groq',
+            regex: /\\./,
+        },
+    ],
+    '#sort-pair': [
+        {
+            token: ['variable.other.readwrite.groq', 'text', 'keyword.other.groq'],
+            regex: /([_A-Za-z][_0-9A-Za-z]*)(?:(\s*)(asc|desc))?/,
+        },
+        {
+            token: ['constant.language.groq', 'punctuation.definition.bracket.begin.groq'],
+            regex: /(@)(\[)/,
+            push: [
+                {
+                    token: ['punctuation.definition.bracket.begin.groq', 'text', 'keyword.other.groq'],
+                    regex: /(\])(?:(\s*)(asc|desc))?/,
+                    next: 'pop',
+                },
+                {
+                    include: '#string',
+                },
+            ],
+        },
+    ],
+    '#sort-order': [
+        {
+            token: 'support.function.sortorder.begin.groq',
+            regex: /\border\s*\(/,
+            push: [
+                {
+                    token: 'support.function.sortorder.end.groq',
+                    regex: /\)/,
+                    next: 'pop',
+                },
+                {
+                    include: '#sort-pair',
+                },
+                {
+                    token: 'punctuation.separator.array.groq',
+                    regex: /,/,
+                },
+                {
+                    token: 'invalid.illegal.expected-sort-separator.groq',
+                    regex: /[^\s\]]/,
+                },
+                {
+                    defaultToken: 'support.function.sortorder.groq',
+                },
+            ],
+        },
+    ],
+    '#function-call': [
+        {
+            include: '#function-var-arg',
+        },
+        {
+            include: '#function-single-arg',
+        },
+        {
+            include: '#function-round',
+        },
+    ],
+    '#function-var-arg': [
+        {
+            token: 'support.function.vararg.begin.groq',
+            regex: /\b(?:coalesce|select)\s*\(/,
+            push: [
+                {
+                    token: 'support.function.vararg.end.groq',
+                    regex: /\)/,
+                    next: 'pop',
+                },
+                {
+                    include: '#value',
+                },
+                {
+                    include: '#identifier',
+                },
+                {
+                    include: '#filter',
+                },
+                {
+                    include: '#pair',
+                },
+                {
+                    token: 'punctuation.separator.array.groq',
+                    regex: /,/,
+                },
+                {
+                    defaultToken: 'support.function.vararg.groq',
+                },
+            ],
+        },
+    ],
+    '#function-single-arg': [
+        {
+            token: 'support.function.singlearg.begin.groq',
+            regex: /\b(?:count|defined|length|path|references)\s*\(/,
+            push: [
+                {
+                    token: 'support.function.singlearg.end.groq',
+                    regex: /\)/,
+                    next: 'pop',
+                },
+                {
+                    include: '#query',
+                },
+                {
+                    include: '#identifier',
+                },
+                {
+                    include: '#value',
+                },
+                {
+                    include: '#pair',
+                },
+                {
+                    defaultToken: 'support.function.singlearg.groq',
+                },
+            ],
+        },
+    ],
+    '#identifier': [
+        {
+            token: [
+                'variable.other.readwrite.groq',
+                'text',
+                'punctuation.definition.block.js',
+                'text',
+                'keyword.operator.reference.groq',
+            ],
+            regex: /([_A-Za-z][_0-9A-Za-z]*)(\s*)((?:\[\s*\])?)(\s*)(->)/,
+        },
+        {
+            token: [
+                'variable.other.readwrite.groq',
+                'constant.language.groq',
+                'text',
+                'punctuation.definition.block.js',
+                'text',
+                'keyword.operator.descendant.groq',
+            ],
+            regex: /(?:([_A-Za-z][_0-9A-Za-z]*)|([@^]))(\s*)((?:\[\s*\])?)(\s*)(\.)/,
+        },
+        {
+            token: 'variable.other.readwrite.groq',
+            regex: /[_A-Za-z][_0-9A-Za-z]*/,
+        },
+    ],
+    '#value': [
+        {
+            include: '#constant',
+        },
+        {
+            include: '#number',
+        },
+        {
+            include: '#string',
+        },
+        {
+            include: '#array',
+        },
+        {
+            include: '#variable',
+        },
+        {
+            include: '#projection',
+        },
+        {
+            include: '#comments',
+        },
+        {
+            include: '#function-call',
+        },
+    ],
+};
+ace.define('ace/mode/groq_highlight_rules', ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'], (acequire, exports, _module) => {
+    const oop = acequire('../lib/oop');
+    const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
+    const GroqHighlightRules = function () {
+        /* eslint-disable @typescript-eslint/ban-ts-comment */
+        // @ts-ignore
+        this.$rules = rules;
+        // @ts-ignore
+        this.normalizeRules();
+        /* eslint-enable @typescript-eslint/ban-ts-comment */
+    };
+    oop.inherits(GroqHighlightRules, TextHighlightRules);
+    exports.GroqHighlightRules = GroqHighlightRules;
+});
+ace.define('ace/mode/groq', [
+    'require',
+    'exports',
+    'module',
+    'ace/lib/oop',
+    'ace/mode/text',
+    'ace/tokenizer',
+    'ace/mode/groq_highlight_rules',
+    'ace/mode/folding/cstyle',
+], (acequire, exports, _module) => {
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./text').Mode;
+    const Tokenizer = acequire('../tokenizer').Tokenizer;
+    const GroqHighlightRules = acequire('./groq_highlight_rules').GroqHighlightRules;
+    const FoldMode = acequire('./folding/cstyle').FoldMode;
+    const Mode = function () {
+        /* eslint-disable @typescript-eslint/ban-ts-comment */
+        const highlighter = new GroqHighlightRules();
+        // @ts-ignore
+        this.foldingRules = new FoldMode();
+        // @ts-ignore
+        this.$tokenizer = new Tokenizer(highlighter.getRules());
+        // @ts-ignore
+        this.$keywordList = highlighter.$keywordList;
+        /* eslint-enable @typescript-eslint/ban-ts-comment */
+    };
+    oop.inherits(Mode, TextMode);
+    (function () {
+        /* eslint-disable @typescript-eslint/ban-ts-comment */
+        // @ts-ignore
+        this.lineCommentStart = "'";
+        /* eslint-enable @typescript-eslint/ban-ts-comment */
+    }.call(Mode.prototype));
+    exports.Mode = Mode;
+});
+
+// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./editorSupport
+const SUPPORTED_LANGUAGES = [
+    { title: 'Batch file', value: 'batchfile' },
+    { title: 'C#', value: 'csharp' },
+    { title: 'CSS', value: 'css' },
+    { title: 'Go', value: 'golang' },
+    { title: 'GROQ', value: 'groq' },
+    { title: 'HTML', value: 'html' },
+    { title: 'Java', value: 'java' },
+    { title: 'JavaScript', value: 'javascript' },
+    { title: 'JSON', value: 'json' },
+    { title: 'JSX', value: 'jsx' },
+    { title: 'Markdown', value: 'markdown' },
+    { title: 'MySQL', value: 'mysql' },
+    { title: 'PHP', value: 'php' },
+    { title: 'Plain text', value: 'text' },
+    { title: 'Python', value: 'python' },
+    { title: 'Ruby', value: 'ruby' },
+    { title: 'SASS', value: 'sass' },
+    { title: 'SCSS', value: 'scss' },
+    { title: 'sh', value: 'sh' },
+    { title: 'TSX', value: 'tsx' },
+    { title: 'TypeScript', value: 'typescript' },
+    { title: 'XML', value: 'xml' },
+    { title: 'YAML', value: 'yaml' },
+];
+const LANGUAGE_ALIASES = { js: 'javascript' };
+const SUPPORTED_THEMES = ['github', 'monokai', 'terminal', 'tomorrow'];
+const DEFAULT_THEME = 'tomorrow';
+const ACE_SET_OPTIONS = {
+    useSoftTabs: true,
+    navigateWithinSoftTabs: true /* note only supported by ace v1.2.7 or higher */,
+};
+const ACE_EDITOR_PROPS = { $blockScrolling: true };
+const PATH_LANGUAGE = ['language'];
+const PATH_CODE = ['code'];
+const PATH_FILENAME = ['filename'];
+
+const EditorContainer = styled(Card) `
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 0;
+
+  .ace_editor {
+    font-family: ${({ theme }) => theme.sanity.fonts.code.family};
+    font-size: ${({ theme }) => theme.sanity.fonts.code.sizes[1]};
+    line-height: inherit;
+  }
+
+  ${highlightMarkersCSS}
+
+  &:not([disabled]):not([readonly]) {
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.sanity.color.base.focusRing};
+      background-color: ${({ theme }) => theme.sanity.color.base.bg};
+      border-color: ${({ theme }) => theme.sanity.color.base.focusRing};
+    }
+  }
+`;
+// Returns a string with the mode name if supported (because aliases), otherwise false
+function isSupportedLanguage(mode) {
+    const alias = LANGUAGE_ALIASES[mode];
+    if (alias) {
+        return alias;
+    }
+    const isSupported = SUPPORTED_LANGUAGES.find((lang) => lang.value === mode);
+    if (isSupported) {
+        return mode;
+    }
+    return false;
+}
+const CodeInput = React.forwardRef((props, ref) => {
+    const aceEditorRef = useRef();
+    const aceEditorId = useId();
+    const { onFocus, onChange, onBlur, compareValue, value, presence, type, level = 0, readOnly, focusPath, } = props;
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            aceEditorRef?.current?.editor?.focus();
+        },
+    }));
+    const handleLanguageFocus = useCallback(() => {
+        onFocus(PATH_LANGUAGE);
+    }, [onFocus]);
+    const handleCodeFocus = useCallback(() => {
+        onFocus(PATH_CODE);
+    }, [onFocus]);
+    const handleFilenameFocus = useCallback(() => {
+        onFocus(PATH_FILENAME);
+    }, [onFocus]);
+    const handleFilenameChange = useCallback((event) => {
+        const val = event.target.value;
+        const path = PATH_FILENAME;
+        onChange(PatchEvent.from([setIfMissing({ _type: type.name }), val ? set(val, path) : unset(path)]));
+    }, [onChange, type.name]);
+    const getTheme = useCallback(() => {
+        const preferredTheme = type.options?.theme;
+        return preferredTheme && SUPPORTED_THEMES.find((theme) => theme === preferredTheme)
+            ? preferredTheme
+            : DEFAULT_THEME;
+    }, [type]);
+    const handleToggleSelectLine = useCallback((lineNumber) => {
+        const editorSession = aceEditorRef.current?.editor?.getSession();
+        const backgroundMarkers = editorSession?.getMarkers(true);
+        const currentHighlightedLines = Object.keys(backgroundMarkers)
+            .filter((key) => backgroundMarkers[key].type === 'screenLine')
+            .map((key) => backgroundMarkers[key].range.start.row);
+        const currentIndex = currentHighlightedLines.indexOf(lineNumber);
+        if (currentIndex > -1) {
+            // toggle remove
+            currentHighlightedLines.splice(currentIndex, 1);
+        }
+        else {
+            // toggle add
+            currentHighlightedLines.push(lineNumber);
+            currentHighlightedLines.sort();
+        }
+        onChange(PatchEvent.from(set(currentHighlightedLines.map((line) => 
+        // ace starts at line (row) 0, but we store it starting at line 1
+        line + 1), ['highlightedLines'])));
+    }, [aceEditorRef, onChange]);
+    const handleGutterMouseDown = useCallback((event) => {
+        const target = event.domEvent.target;
+        if (target.classList.contains('ace_gutter-cell')) {
+            const row = event.getDocumentPosition().row;
+            handleToggleSelectLine(row);
+        }
+    }, [handleToggleSelectLine]);
+    useEffect(() => {
+        const editor = aceEditorRef?.current?.editor;
+        return () => {
+            editor?.session?.removeListener('guttermousedown', handleGutterMouseDown);
+        };
+    }, [aceEditorRef, handleGutterMouseDown]);
+    const handleEditorLoad = useCallback((editor) => {
+        editor?.on('guttermousedown', handleGutterMouseDown);
+    }, [handleGutterMouseDown]);
+    const getLanguageAlternatives = useCallback(() => {
+        const languageAlternatives = type.options?.languageAlternatives;
+        if (!languageAlternatives) {
+            return SUPPORTED_LANGUAGES;
+        }
+        if (!Array.isArray(languageAlternatives)) {
+            throw new Error(`'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}`);
+        }
+        return languageAlternatives.reduce((acc, { title, value: val, mode }) => {
+            const alias = LANGUAGE_ALIASES[val];
+            if (alias) {
+                // eslint-disable-next-line no-console
+                console.warn(`'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`, val, alias, alias);
+                return acc.concat({ title, value: alias, mode: mode });
+            }
+            if (!mode && !SUPPORTED_LANGUAGES.find((lang) => lang.value === val)) {
+                // eslint-disable-next-line no-console
+                console.warn(`'options.languageAlternatives' lists a language which is not supported: "%s", syntax highlighting will be disabled.`, val);
+            }
+            return acc.concat({ title, value: val, mode });
+        }, []);
+    }, [type]);
+    const handleCodeChange = useCallback((code) => {
+        const path = PATH_CODE;
+        const fixedLanguage = type.options?.language;
+        onChange(PatchEvent.from([
+            setIfMissing({ _type: type.name, language: fixedLanguage }),
+            code ? set(code, path) : unset(path),
+        ]));
+    }, [onChange, type]);
+    const handleLanguageChange = useCallback((event) => {
+        const val = event.currentTarget.value;
+        const path = PATH_LANGUAGE;
+        onChange(PatchEvent.from([setIfMissing({ _type: type.name }), val ? set(val, path) : unset(path)]));
+    }, [onChange, type.name]);
+    const languages = getLanguageAlternatives().slice();
+    const selectedLanguage = props?.value?.language
+        ? languages.find((item) => item.value === props?.value?.language)
+        : undefined;
+    const languageField = type.fields.find((field) => field.name === 'language');
+    const filenameField = type.fields.find((field) => field.name === 'filename');
+    const languageCompareValue = PathUtils.get(compareValue, PATH_LANGUAGE);
+    const codeCompareValue = PathUtils.get(compareValue, PATH_CODE);
+    const filenameCompareValue = PathUtils.get(compareValue, PATH_FILENAME);
+    const languagePresence = presence.filter((presenceItem) => PathUtils.startsWith(PATH_LANGUAGE, presenceItem.path));
+    const codePresence = presence.filter((presenceItem) => PathUtils.startsWith(PATH_CODE, presenceItem.path));
+    const filenamePresence = presence.filter((presenceItem) => PathUtils.startsWith(PATH_FILENAME, presenceItem.path));
+    const renderEditor = useCallback(() => {
+        const fixedLanguage = type.options?.language;
+        const language = value?.language || fixedLanguage;
+        // the language config from the schema
+        const configured = languages.find((entry) => entry.value === language);
+        // is the language officially supported (e.g. we import the mode by default)
+        const supported = language && isSupportedLanguage(language);
+        const mode = configured?.mode || (supported ? language : 'text');
+        return (React.createElement(EditorContainer, { radius: 1, shadow: 1, readOnly: readOnly },
+            React.createElement(AceEditor, { ref: aceEditorRef, mode: mode, theme: getTheme(), width: "100%", onChange: handleCodeChange, name: `editor-${aceEditorId}`, value: (value && value.code) || '', markers: value && value.highlightedLines
+                    ? createHighlightMarkers(value.highlightedLines)
+                    : undefined, onLoad: handleEditorLoad, readOnly: readOnly, tabSize: 2, wrapEnabled: true, setOptions: ACE_SET_OPTIONS, editorProps: ACE_EDITOR_PROPS, onFocus: handleCodeFocus, onBlur: onBlur })));
+    }, [
+        aceEditorId,
+        getTheme,
+        handleCodeChange,
+        handleCodeFocus,
+        handleEditorLoad,
+        languages,
+        onBlur,
+        readOnly,
+        type,
+        value,
+    ]);
+    if (type.options?.language) {
+        return (React.createElement(ChangeIndicatorProvider, { path: PATH_CODE, focusPath: focusPath, value: value?.code, compareValue: codeCompareValue },
+            React.createElement(FormFieldSet, { title: type.title, description: type.description, level: level }, renderEditor())));
+    }
+    return (React.createElement(FormFieldSet, { title: type.title, description: type.description, level: level, __unstable_changeIndicator: false },
+        React.createElement(Stack, { space: 3 },
+            React.createElement(ChangeIndicatorProvider, { path: PATH_LANGUAGE, focusPath: focusPath, value: selectedLanguage?.value, compareValue: languageCompareValue },
+                React.createElement(FormField, { level: level + 1, label: languageField?.type.title || 'Language', __unstable_presence: languagePresence },
+                    React.createElement(Select, { onChange: handleLanguageChange, readOnly: readOnly, value: selectedLanguage?.value || '', onFocus: handleLanguageFocus, onBlur: onBlur }, languages.map((lang) => (React.createElement("option", { key: lang.value, value: lang.value }, lang.title)))))),
+            type.options?.withFilename && (React.createElement(ChangeIndicatorProvider, { path: PATH_FILENAME, focusPath: focusPath, value: value?.filename, compareValue: filenameCompareValue },
+                React.createElement(FormField, { label: filenameField?.type.title || 'Filename', level: level + 1, __unstable_presence: filenamePresence },
+                    React.createElement(TextInput, { name: "filename", value: value?.filename || '', placeholder: filenameField?.type.placeholder, onChange: handleFilenameChange, onFocus: handleFilenameFocus, onBlur: onBlur })))),
+            React.createElement(ChangeIndicatorProvider, { path: PATH_CODE, focusPath: focusPath, value: value?.code, compareValue: codeCompareValue },
+                React.createElement(FormField, { label: "Code", level: level + 1, __unstable_presence: codePresence }, renderEditor())))));
+});
+CodeInput.displayName = 'CodeInput';
+
+export { ACE_SET_OPTIONS as A, CodeInput as C, ACE_EDITOR_PROPS as a, createHighlightMarkers as c };
+//# sourceMappingURL=_CodeInput-1b58302e.js.map