"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const index$8 = require("../_vendor/@codemirror/state/dist-index.cjs");
const index = require("../_vendor/@codemirror/view/dist-index.cjs");
const react = require("react");
const index$1 = require("../_vendor/@codemirror/lang-html/dist-index.cjs");
const index$2 = require("../_vendor/@codemirror/lang-javascript/dist-index.cjs");
const index$5 = require("../_vendor/@codemirror/commands/dist-index.cjs");
const index$3 = require("../_vendor/@codemirror/autocomplete/dist-index.cjs");
const index$4 = require("../_vendor/@codemirror/language/dist-index.cjs");
const index$7 = require("../_vendor/@codemirror/lint/dist-index.cjs");
const index$6 = require("../_vendor/@codemirror/search/dist-index.cjs");
const useBaseExtensions = require("./use-base-extensions.cjs");
function useJsEditor(props) {
  const {
    value,
    autoFocus,
    onChange,
    readonly,
    lineWrapping,
    placeholder
  } = props;
  const containerRef = react.useRef(null);
  const editorViewRef = react.useRef(null);
  const isInternalChangeRef = react.useRef(false);
  const customTheme = react.useMemo(() => {
    return index.EditorView.theme({
      "&": {
        height: "100%",
        fontSize: "14px"
      },
      ".cm-scroller": {
        fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
      },
      ".cm-content": {
        caretColor: "var(--foreground-default, #000)"
      },
      "&.cm-focused .cm-cursor": {
        borderLeftColor: "var(--foreground-default, #000)"
      },
      "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "var(--background-selected, #d4d4d4)"
      },
      ".cm-gutters": {
        backgroundColor: "var(--background-subtle, #f5f5f5)",
        color: "var(--foreground-subtle, #999)",
        border: "none"
      }
    });
  }, []);
  const baseExtensions = useBaseExtensions.useBaseExtensions({
    readonly,
    lineWrapping,
    onChange: (newValue, update) => {
      isInternalChangeRef.current = true;
      onChange == null ? void 0 : onChange(newValue, update);
    },
    theme: customTheme,
    includeLineNumbers: true,
    includeKeymap: false
  });
  const languageExtensions = react.useMemo(() => {
    const extensions = [
      index$1.html({
        autoCloseTags: true
      }),
      index$2.javascript({
        jsx: false,
        typescript: false
      }),
      index$3.autocompletion({
        activateOnTyping: true,
        icons: true
      }),
      index$2.javascriptLanguage.data.of({
        autocomplete: index$2.scopeCompletionSource(globalThis)
      }),
      index$4.syntaxHighlighting(index$4.defaultHighlightStyle),
      index.keymap.of([
        ...index$5.defaultKeymap,
        ...index$6.searchKeymap,
        ...index$5.historyKeymap,
        ...index$4.foldKeymap,
        ...index$3.completionKeymap,
        ...index$7.lintKeymap
      ])
    ];
    if (placeholder) {
      extensions.push(index.placeholder(placeholder));
    }
    return extensions;
  }, [placeholder]);
  const createEditor = react.useCallback(() => {
    if (!containerRef.current) return;
    const config = {
      doc: value ?? "",
      extensions: [
        ...baseExtensions,
        ...languageExtensions
      ]
    };
    const state = index$8.EditorState.create(config);
    const editorView = new index.EditorView({
      parent: containerRef.current,
      state
    });
    editorViewRef.current = editorView;
  }, [value, baseExtensions, languageExtensions]);
  react.useLayoutEffect(() => {
    createEditor();
    return () => {
      if (editorViewRef.current) {
        editorViewRef.current.destroy();
        editorViewRef.current = null;
      }
    };
  }, []);
  react.useEffect(() => {
    const editor = editorViewRef.current;
    if (!editor) return;
    if (isInternalChangeRef.current) {
      isInternalChangeRef.current = false;
      return;
    }
    const currentValue = editor.state.doc.toString();
    const newValue = value ?? "";
    if (currentValue !== newValue) {
      editor.dispatch({
        changes: {
          from: 0,
          to: currentValue.length,
          insert: newValue
        }
      });
    }
  }, [value]);
  react.useEffect(() => {
    if (autoFocus && editorViewRef.current) {
      editorViewRef.current.focus();
    }
  }, [autoFocus]);
  return {
    containerRef
  };
}
exports.useJsEditor = useJsEditor;
//# sourceMappingURL=use-js-editor.cjs.map
