Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor rewrite #560

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Editor rewrite #560

wants to merge 3 commits into from

Conversation

patrick11514
Copy link
Contributor

@patrick11514 patrick11514 commented Nov 26, 2024

Blocked by #561

Currently the editor is not used, because it would need further rewrite. But @erikhaw could it use in his work.

I rewrited editor + added ability for external EditorExtensions.
This extensions can set specific options to editor for specific file extensions/names
Example usage:

<script lang="ts" setup>
import type { EditorExtension, LintHelper, HintHelper} from '../utilities/EditorUtils';

//Simple hintHelper, which shows first, second and idk as hint
const hintHelper = {
    type: 'hint',
    fileType: 'python',
    callback: (editor) => {
        const hints = ['first', 'second', 'idk'];

        const cursor = editor.getCursor();
        const token = editor.getTokenAt(cursor);

        const lowerCase = token.string.toLowerCase();

        const selected = hints.filter((hint) => hint.startsWith(lowerCase));

        return {
            list: selected,
            from: {
                line: cursor.line,
                ch: token.start
            },
            to: {
                line: cursor.line,
                ch: token.end
            }
        };
    }
} satisfies HintHelper;

//this is editor extension, which defines, that it will be used for py file extension, will enable spellCheck, add marker before lines (gutter) and use hintHelper
const extensions = {
    extension: "py",
    helpers: hintHelper,
    spellCheck: true,
    gutters: 'CodeMirror-lint-markers'
} satisfies EditorExtension;
</script>

<template>
    <Editor filename="test.py" :extensions="[extension]" :lint="true" />
</template>

Each property can be also array, so you can create extension for N file extensions, but names and extensions cannot be mixed.
Later we can add more Helpers, or update existing one.

Since we can only use one callback for each CodeMirror's registerHelper specific file type, I'm using something I called HelperMerger, which is just function, which merges the return values from multiple helpers of same file type. For example in the lintHelper it was easy, because it returns array of errors, but in the hintHelper it returns object, with list of hints, and then from and to position, where should be hint put, since each function can return different from and to positions, I just grab the first one and concatenate the lists (it is not best approach, but for now I don't expect us to use more than more one hintHelper at once).

Video showcase:
https://github.com/user-attachments/assets/476bd663-65ca-4028-9a78-9b42fb477c0c

@patrick11514 patrick11514 changed the title Editor + ColorTheme rewrite Editor rewrite Nov 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant