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

Desktop: Custom CSS: Add cm-listItem class to lines with list items, don't add region start/end markers for items that are always single-line #11291

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Oct 30, 2024

Summary

The goal of this pull request is to simplify custom styling of the CodeMirror 6-based editor:

  • With the legacy CodeMirror 5 editor, it was possible to style list items. With CodeMirror 6, this is only possible by referring to internal class names.
  • The CodeMirror 6-based editor was adding unnecessary cm-regionFirstLine and cm-regionLastLine classes to regions that are always single-line.
    • This could complicate styling if headers or other affected items were present in a multi-line region (e.g. a blockquote).

Note

This currently targets release-3.1. Previously, certain list-specific custom styles were impossible (or very difficult) to migrate from CodeMirror 5 to CodeMirror 6.

Screenshot

screenshot: Shows headers 1 and 2, a monospaced table, numbered and unordered lists open in Joplin with the dev tools visible
screenshot: Same as previous screenshot, but in dark mode and with a code block also visible

CSS comparison

BeforeAfter
Header 1

class="cm-h1 cm-headerLine cm-header cm-regionFirstLine cm-regionLastLine cm-line"

class="cm-h1 cm-headerLine cm-header cm-line"

Block math
  • First line:
    • class="cm-mathBlock cm-regionFirstLine cm-line"
  • Middle lines:
    • class="cm-mathBlock cm-line"
  • Last line:
    • class="cm-mathBlock cm-regionLastLine cm-line"
  • First line:
    • class="cm-mathBlock cm-regionFirstLine cm-line"
  • Middle lines:
    • class="cm-mathBlock cm-line"
  • Last line:
    • class="cm-mathBlock cm-regionLastLine cm-line"
Single-level ordered list
  • First line:
    • class="cm-line"
  • Middle lines:
    • class="cm-line"
  • Last line:
    • class="cm-line"
  • First line:
    • class="cm-orderedList cm-regionFirstLine cm-listItem cm-line"
  • Middle lines:
    • class="cm-orderedList cm-listItem cm-line"
  • Last line:
    • class="cm-orderedList cm-regionLastLine cm-listItem cm-line"
Single-level unordered list (bullet list/task list)
  • First line:
    • class="cm-line"
  • Middle lines:
    • class="cm-line"
  • Last line:
    • class="cm-line"
  • First line:
    • class="cm-unorderedList cm-regionFirstLine cm-listItem cm-line"
  • Middle lines:
    • class="cm-unorderedList cm-listItem cm-line"
  • Last line:
    • class="cm-unorderedList cm-regionLastLine cm-listItem cm-line"

Note: This pull request does not make it possible to consistently style even/odd list items differently (without a plugin).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants