Convert CodeJarEditor to not use any legacy compat preact code.

src/elements/CodeJar/CodeJarEditor.tsx

@@ -1,53 +1,49 @@
-import { CodeJar } from "codejar";
+import { Component, JSX, createRef } from "preact";
-import { JSX } from "preact";
+import { CodeJar as _CodeJar } from "codejar";
-import { Ref, useEffect, useRef } from "preact/compat";
 
-interface EditorProps {
+interface CodeJarProps {
-  highlight: unknown;
+  language: string;
-  options?: { tab: string };
+  tabSize: number;
   code: string;
   onUpdate: (code: string) => void;
 }
 
-export const useCodeJar = (props: EditorProps): Ref<HTMLDivElement> => {
+export class CodeJarEditor extends Component<CodeJarProps, unknown> {
-  const editorRef = useRef<HTMLDivElement>(null);
+  editorRef = createRef<HTMLDivElement>();
-  const jar = useRef<CodeJar | null>(null);
+  jar = createRef<_CodeJar | null>();
 
-  useEffect(() => {
+  componentDidMount(): void {
-    if (!editorRef.current) return;
+    this.jar.current = _CodeJar(this.editorRef.current, () => {}, {
-
+      tab: " ".repeat(this.props.tabSize),
-    jar.current = CodeJar(
+      window: window,
-      editorRef.current,
-      props.highlight as (e: HTMLElement, pos?: unknown) => void,
-      { ...props.options, window: window },
-    );
-
-    jar.current.updateCode(props.code);
-
-    jar.current.onUpdate((txt) => {
-      if (!editorRef.current) return;
-      props.onUpdate(txt);
     });
 
-    return () => jar.current.destroy();
+    this.jar.current.updateCode(this.props.code);
-  }, []);
 
-  useEffect(() => {
+    this.jar.current.onUpdate((txt) => {
-    if (!jar.current || !editorRef.current) return;
+      this.props.onUpdate(txt);
-    jar.current.updateCode(props.code);
+    });
-  }, [props.code]);
+  }
 
-  useEffect(() => {
+  componentWillUnmount(): void {
-    if (!jar.current || !props.options) return;
+    if (this.jar.current) {
+      this.jar.current.destroy();
+    }
+  }
 
-    jar.current.updateOptions(props.options);
+  componentDidUpdate(prevProps: CodeJarProps): void {
-  }, [props.options]);
+    if (!this.jar.current) return;
 
-  return editorRef;
+    if (
-};
+      prevProps.code !== this.props.code ||
+      prevProps.tabSize !== this.props.tabSize ||
+      prevProps.language !== this.props.language
+    ) {
+      this.componentDidMount();
+    }
+  }
 
-export function CodeJarEditor(props: EditorProps): JSX.Element {
+  render(): JSX.Element {
-  const editorRef = useCodeJar(props);
+    return <div class={"editor language-" + this.props.language} ref={this.editorRef} />;
-
+  }
-  return <div class="editor language-json" ref={editorRef}></div>;
 }

src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx

@@ -91,10 +91,10 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
       <div>
         <p class="uk-text-danger" id="errorText" />
         <CodeJarEditor
-          highlight={() => {}}
+          language="json"
+          tabSize={4}
           code={this.getStringKVData(this.state.kvData)}
           onUpdate={(code) => this.onCodeUpdate(code)}
-          options={{ tab: " ".repeat(4) }}
         />
         <button class="uk-button uk-button-primary" onClick={() => this.editorSave()}>
           {i18next.t("kv_sec_edit_btn")}