About

22nd November 2024 at 9:55am

This plugin adds an advanced Editor to TiddlyWiki 5

Browser support:

Browser support is widely given, Internet Explorer is not supported because of the use of event.key for the Keyboard Shortcut System

Installation

See Installation for instructions

Examples

See the following Tiddlers for some examples:

How-To's

See the following Tiddlers for How-To's:

Features

  • Syntax Highlighting
  • Autocompletion
    • ctrl-Space opens the current context-sensitive completion options
  • Runtime reconfiguration of the Editor
    • An Editor with the tag $:/tags/Stylesheet for example reconfigures its language to text/css
    • The configuration options for the Editor don't make the Editor refresh, they just update the internal configuration

CodeMirror 6

15th September 2024 at 2:26pm

CodeMirror 6 is open source under a permissive license (MIT). It is being developed on GitHub.

Installation

17th November 2024 at 4:25pm

You can install the CodeMirror 6 plugin in two ways

1. The Drag&Drop way

Therefor, simply drag this box to your wiki, save your wiki and reload it:

CodeMirror: CodeMirror 6 editor 

$:/plugins/BTC/tiddlywiki-codemirror-6

2. The NodeJS way

Clone the GitHub repository to your TIDDLYWIKI_PLUGIN_PATH:

git clone --depth=1 git@github.com:BurningTreeC/tiddlywiki-codemirror-6 $TIDDLYWIKI_PLUGIN_PATH

Enable the plugin in your wiki's tiddlywiki.info file:

"plugins": [
	"plugins/first-plugin",
	"plugins/second-plugin",
	...
	"tiddlywiki-codemirror-6/tiddlywiki-codemirror-6"
	]

This plugin overrides the following Core Tiddlers:

Syntax Highlighting

16th September 2024 at 4:48pm

The following languages are currently supported:

  • Javascript
  • Markdown
  • Python
  • Rust
  • PHP
  • HTML
  • JSON
  • CSS
  • YAML
  • Go
  • C++
  • XML
  • SQL (dialect configurable in Control Panel)
    • StandardSQL
    • PostgreSQL
    • MySQL
    • MariaSQL
    • MSSQL
    • SQLite
    • Cassandra
    • PLSQL
Draft of 'Lorem ipsum'
CodeMirror 6Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Type:
Add a new field:
Draft of 'Try Markdown in this Markdown Tiddler'
CodeMirror 6Markdown
# Hello there
---
- item 1
- item 2
- item 3
Type:
Add a new field:
Draft of 'Write some Javascript in this Javascript Tiddler'
CodeMirror 6Javascript
(function() {
"use strict";
})();
Type:
Add a new field:
Draft of 'Write some pure CSS in this CSS Tiddler'
.tc-tiddler-frame {
}
Type:
Add a new field:
Draft of 'Write some Python Code in this Python Tiddler'
def is_prime(n):
if n <= 1:
return False
if n <= 3:
return True
if n % 2 == 0 or n % 3 == 0:
return False
i = 5
while i * i <= n:
if n % i == 0 or n % (i + 2) == 0:
return False
i += 6
return True

primes = []
number = 2

while len(primes) < 50:
if is_prime(number):
primes.append(number)
number += 1

print("The first 50 prime numbers are:")
print(primes)
Type:
Add a new field:

Actions triggered by character sequences

31st March 2024 at 6:52am

Actions can be triggered by typing character sequences

  • create a tiddler with tag
  • add a field "string" and type a character sequence that should trigger the action
  • in its text field insert the action that should be triggered when the character sequence is detected
Draft of 'Try CodeMirror Actions by character sequences'
ActionsCodeMirror 6
Try typing "///" or "&&&" - there are actions defined for these character sequences
You can also create your own actions with your defined character sequence



Type:
Add a new field:

Tiddler Titles can be autocompleted and custom autocomplete entries can be made

21st September 2024 at 9:08am

Autocompletion of Tiddler titles and custom completions can be triggered by typing the character sequence "??"

How to add custom completions

  • create a tiddler with tag
  • whatever you put into its text field will be used as autocompletion source
  • whatever you put into its description field will be used as label and filtering (falls back to the text field)
Draft of 'Try Tiddler Completions'
AutocompleteCodeMirror 6
In the Control Panel a character sequence is set up which triggers tiddler autocompletion
It can be changed, but here it is "??"
Try typing "??" and type a word without space after that
The autocompletion popup can be closed using Escape
The icon for the tiddler completion entries can also be changed in the Control Panel


Type:
Add a new field:

Colors

31st March 2024 at 6:51am
  • <<colour-extend cm-active-line>>: rgba(240, 244, 240, 0.75) - this styles the active line and should have an rgba value with opacity below 1
  • <<colour-extend cm-gutter-background>>: #bbbbbb - this styles the background color of the line-numbers gutter
  • <<colour-extend cm-gutter-foreground>>: #333333 - this styles the foreground color of the line-numbers gutter
  • <<colour-extend cm-search-match>>: #aaefad - this styles the background color of search matches
  • <<colour-extend cm-search-match-border>>: #34c734 - this styles the border color of search matches
  • <<colour-extend cm-search-match-selected>>: #34c734 - this styles the background color of the selected search match
  • <<colour-extend cm-selection-match>>: #ffffdd - this styles the background color of strings that match the string of the current selection
  • <<colour-extend cm-matching-bracket-outline>>: #999999 - this styles the outline color of matching brackets
  • <<colour-extend cm-tooltip-background>>: #ffffff - this styles the background color of tooltips, like the autocomplete popup background for example
  • <<colour-extend cm-selection-background>>: #5778d8 - this styles the background color of a text selection
  • <<colour-extend cm-selection-foreground>>: #ffffff - this styles the foreground color of a text selection
  • <<colour-extend cm-tooltip-selected-background>>: #5778d8 - this styles the background color of selected items in tooltips, like the autocomplete popup
  • <<colour-extend cm-tooltip-selected-foreground>>: #ffffff - this styles the foreground color of selected items in tooltips, like the autocomplete popup
  • <<colour-extend cm-caret-colour>>: #333333 - this styles the caret color
  • <<colour-extend cm-fold-placeholder-foreground>>: #333333 - this styles the "fold" placeholder's foreground color

The colour-extend macro looks like this:

\define colour-extend(name,tiddler:"")
<$transclude tiddler={{{ [<__tiddler__>!is[blank]] ~[{$:/palette}addsuffix[/extend]] }}} index="$name$"/>
\end

The Keymap can be freely customized

17th November 2024 at 5:00pm

There's a Keyboard Shortcut mechanism which can be used to override the shortcuts of the default KeyMap

Note that you need to close and reopen a Tiddler that is already open for editing when you change a CodeMirror Keyboard Shortcut

The tag defines a Tiddler used for the mechanism

  • The Tiddler needs the field key holding either a Keyboard Shortcut directly or a Keyboard Shortcut descriptor in the form of ((my-shortcut))
  • The form ((my-shortcut)) allows adding the Keyboard Shortcut in the Control Panel's "Keyboard Shortcuts" Tab
    • Therefor a Tiddler $:/config/ShortcutInfo/my-shortcut is needed with a description in its Text field
  • The Tiddler with the tag needs a CodeMirror command in its Text field
    • Find available commands here and here
    • If you want, for example, assign a key to the command "gotoLine", you write "gotoLine" (without the quotes) in the Text field

KeyMap

11th September 2023 at 6:34am

Note that any TiddlyWiki global keyboard shortcut or keyboard shortcut defined in a surrounding keyboard widget gets precedence


ArrowLeft: cursorCharLeft (selectCharLeft with Shift)
ArrowRight: cursorCharRight (selectCharRight with Shift)
Ctrl-ArrowLeft (Alt-ArrowLeft on macOS): cursorGroupLeft (selectGroupLeft with Shift)
Ctrl-ArrowRight (Alt-ArrowRight on macOS): cursorGroupRight (selectGroupRight with Shift)
Cmd-ArrowLeft (on macOS): cursorLineStart (selectLineStart with Shift)
Cmd-ArrowRight (on macOS): cursorLineEnd (selectLineEnd with Shift)
ArrowUp: cursorLineUp (selectLineUp with Shift)
ArrowDown: cursorLineDown (selectLineDown with Shift)
Cmd-ArrowUp (on macOS): cursorDocStart (selectDocStart with Shift)
Cmd-ArrowDown (on macOS): cursorDocEnd (selectDocEnd with Shift)
Ctrl-ArrowUp (on macOS): cursorPageUp (selectPageUp with Shift)
Ctrl-ArrowDown (on macOS): cursorPageDown (selectPageDown with Shift)
PageUp: cursorPageUp (selectPageUp with Shift)
PageDown: cursorPageDown (selectPageDown with Shift)
Home: cursorLineBoundaryBackward (selectLineBoundaryBackward with Shift)
End: cursorLineBoundaryForward (selectLineBoundaryForward with Shift)
Ctrl-Home (Cmd-Home on macOS): cursorDocStart (selectDocStart with Shift)
Ctrl-End (Cmd-Home on macOS): cursorDocEnd (selectDocEnd with Shift)
Enter: insertNewlineAndIndent
Ctrl-a (Cmd-a on macOS): selectAll
Backspace: deleteCharBackward
Delete: deleteCharForward
Ctrl-Backspace (Alt-Backspace on macOS): deleteGroupBackward
Ctrl-Delete (Alt-Delete on macOS): deleteGroupForward
Cmd-Backspace (macOS): deleteToLineStart.
Cmd-Delete (macOS): deleteToLineEnd.
Alt-ArrowLeft (Ctrl-ArrowLeft on macOS): cursorSyntaxLeft (selectSyntaxLeft with Shift)
Alt-ArrowRight (Ctrl-ArrowRight on macOS): cursorSyntaxRight (selectSyntaxRight with Shift)
Alt-ArrowUp: moveLineUp
Alt-ArrowDown: moveLineDown
Shift-Alt-ArrowUp: copyLineUp
Shift-Alt-ArrowDown: copyLineDown
Escape: simplifySelection this is disabled when a surrounding keyboard widget handles it as it does in the default $:/core/ui/EditTemplate
Ctrl-Enter (Cmd-Enter on macOS): insertBlankLine this is disabled when a surrounding keyboard widget handles it as it does in the default $:/core/ui/EditTemplate
Alt-l (Ctrl-l on macOS): selectLine
Ctrl-i (Cmd-i on macOS): selectParentSyntax
Ctrl-[ (Cmd-[ on macOS): indentLess
Ctrl-] (Cmd-] on macOS): indentMore
Ctrl-Alt-\ (Cmd-Alt-\ on macOS): indentSelection
Shift-Ctrl-k (Shift-Cmd-k on macOS): deleteLine
Shift-Ctrl-\ (Shift-Cmd-\ on macOS): cursorMatchingBracket
Ctrl-/ (Cmd-/ on macOS): toggleComment.
Shift-Alt-a: toggleBlockComment.

A test action for the CodeMirror 6 editor

17th September 2023 at 6:17am

Another action for the CodeMirror editor

15th September 2024 at 3:07pm