WIP: basicSetup: refactor array to object #4

Closed

milahu wants to merge 1 commit from patch-2 into main

milahu commented

2022-09-11 11:54:52 +02:00

(Migrated from github.com)

the keys are useful for looping the values in basicSetup

not tested, just a draft

the keys are useful for looping the values in `basicSetup` not tested, just a draft

marijnh commented

2022-09-11 12:31:14 +02:00

(Migrated from github.com)

not tested

I can tell, because this doesn't work. As the docs say, this is something you'd want to copy and modify, it is not configurable.

> not tested I can tell, because this doesn't work. As the docs say, this is something you'd want to copy and modify, it is not configurable.

milahu commented

2022-09-11 13:27:02 +02:00

(Migrated from github.com)

this doesn't work

yes. codemirror would need to accept the object type
but then its hard to differentiate
an "extension object" from an "object of extension objects" ...

something you'd want to copy and modify

yes, my goal is to make this easier

example use:

keep active extensions in a codeMirrorExtensions object
so i can call, for example
codeMirrorExtensions.lineNumbers.reconfigure( ... )

// CodeMirror.jsx

import { createCodeMirror } from "@solid-codemirror/core";

// https://github.com/codemirror/basic-setup
import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
        rectangularSelection, crosshairCursor,
        lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
import {EditorState} from "@codemirror/state"
import {defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching,
        foldGutter, foldKeymap} from "@codemirror/language"
import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
import {searchKeymap, highlightSelectionMatches} from "@codemirror/search"
import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete"
import {lintKeymap} from "@codemirror/lint"

function CodeMirror(props) {
  let ref;
  const codeMirror = createCodeMirror(props, () => ref);

  // object of extensions
  const basicSetupSolid = (() => ({
    lineNumbers: lineNumbers(),
    highlightActiveLineGutter: highlightActiveLineGutter(),
    highlightSpecialChars: highlightSpecialChars(),
    history: history(),
    foldGutter: foldGutter(),
    drawSelection: drawSelection(),
    dropCursor: dropCursor(),
    allowMultipleSelections: EditorState.allowMultipleSelections.of(true),
    indentOnInput: indentOnInput(),
    syntaxHighlighting: syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
    bracketMatching: bracketMatching(),
    closeBrackets: closeBrackets(),

    // FIXME TypeError: Cannot read properties of null (reading 'addEventListener')
    // https://github.com/codemirror/dev/issues/945
    //autocompletion: autocompletion(),

    rectangularSelection: rectangularSelection(),
    crosshairCursor: crosshairCursor(),
    highlightActiveLine: highlightActiveLine(),
    highlightSelectionMatches: highlightSelectionMatches(),

    keymap: keymap.of([
      ...closeBracketsKeymap,
      ...defaultKeymap,
      ...searchKeymap,
      ...historyKeymap,
      ...foldKeymap,
      ...completionKeymap,
      ...lintKeymap
    ]),
  }))();

  // create extensions
  const codeMirrorExtensions = {};
  for (const [extensionName, extension] of Object.entries(basicSetupSolid)) {
    //console.log('basicSetupSolid: extension', extensionName, extension)
    const reconfigureExtension = codeMirror.createExtension(extension);
    codeMirrorExtensions[extensionName] = {
      extension,
      reconfigure: reconfigureExtension,
    };
  }

  return (
    <div>
      <div ref={ref} />
      {/* Buttons to show/hide line numbers */}
      {
      <div>
        <button onClick={() => codeMirrorExtensions.lineNumbers.reconfigure([])}>
          Hide line numbers
        </button>
        <button onClick={(
          () => codeMirrorExtensions.lineNumbers.reconfigure(
            codeMirrorExtensions.lineNumbers.extension
          )
        )}>
          Show line numbers
        </button>
      </div>
      }
    </div>
  );
}

but ... nevermind : )

> this doesn't work yes. codemirror would need to accept the object type but then its hard to differentiate an "extension object" from an "object of extension objects" ... > something you'd want to copy and modify yes, my goal is to make this easier example use: keep active extensions in a `codeMirrorExtensions` object so i can call, for example `codeMirrorExtensions.lineNumbers.reconfigure( ... )` <details> ```jsx // CodeMirror.jsx import { createCodeMirror } from "@solid-codemirror/core"; // https://github.com/codemirror/basic-setup import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor, rectangularSelection, crosshairCursor, lineNumbers, highlightActiveLineGutter} from "@codemirror/view" import {EditorState} from "@codemirror/state" import {defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap} from "@codemirror/language" import {defaultKeymap, history, historyKeymap} from "@codemirror/commands" import {searchKeymap, highlightSelectionMatches} from "@codemirror/search" import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete" import {lintKeymap} from "@codemirror/lint" function CodeMirror(props) { let ref; const codeMirror = createCodeMirror(props, () => ref); // object of extensions const basicSetupSolid = (() => ({ lineNumbers: lineNumbers(), highlightActiveLineGutter: highlightActiveLineGutter(), highlightSpecialChars: highlightSpecialChars(), history: history(), foldGutter: foldGutter(), drawSelection: drawSelection(), dropCursor: dropCursor(), allowMultipleSelections: EditorState.allowMultipleSelections.of(true), indentOnInput: indentOnInput(), syntaxHighlighting: syntaxHighlighting(defaultHighlightStyle, {fallback: true}), bracketMatching: bracketMatching(), closeBrackets: closeBrackets(), // FIXME TypeError: Cannot read properties of null (reading 'addEventListener') // https://github.com/codemirror/dev/issues/945 //autocompletion: autocompletion(), rectangularSelection: rectangularSelection(), crosshairCursor: crosshairCursor(), highlightActiveLine: highlightActiveLine(), highlightSelectionMatches: highlightSelectionMatches(), keymap: keymap.of([ ...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap ]), }))(); // create extensions const codeMirrorExtensions = {}; for (const [extensionName, extension] of Object.entries(basicSetupSolid)) { //console.log('basicSetupSolid: extension', extensionName, extension) const reconfigureExtension = codeMirror.createExtension(extension); codeMirrorExtensions[extensionName] = { extension, reconfigure: reconfigureExtension, }; } return ( <div> <div ref={ref} /> {/* Buttons to show/hide line numbers */} { <div> <button onClick={() => codeMirrorExtensions.lineNumbers.reconfigure([])}> Hide line numbers </button> <button onClick={( () => codeMirrorExtensions.lineNumbers.reconfigure( codeMirrorExtensions.lineNumbers.extension ) )}> Show line numbers </button> </div> } </div> ); } ``` </details> but ... nevermind : )

Pull request closed

This pull request cannot be reopened because the branch was deleted.

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

codemirror/basic-setup!4

No description provided.

Rows
Columns