TiddlyWiki5/editions/codemirrordemo/tiddlers/HelloThere.tid

title: HelloThere

This is a demo of [[TiddlyWiki5|https://tiddlywiki.com]] incorporating a plugin for the [[CodeMirror|http://codemirror.net/]] text editor for the web.

The ~CodeMirror plugin can be extended with ~AddOns for more functionality:

* Search and Replace
* Text - Autocompletion
* Syntax highlighting
* Fullscreen editing
* Keymaps in the style of Emacs, Sublime Text or Vim
* Closing Brackets
* Closing Tags

NOTE: This demo has the ''Sublime Text'' keymap installed.

!!!Try editing the tiddler [[Draft of 'LoremIpsum']] to try out the editor.

Some commands and functions to try:

* Ctrl+F : Search panel to search for expressions
* Ctrl+H (sublime text shortcut, default is Ctrl+Shift+R) : Search and Replace
* Ctrl+Space : Triggers Autocompletion
* typing an opening bracket like `{` automatically creates the closing bracket `}`
* tiddlers with type `application/javascript`, `application/json`, `text/css`, `text/html`, `text/xml`, `text/x-markdown` and `text/x-tiddlywiki` have Syntax Highlighting
* tiddlers with type `text/html` automatically close tags like `<div>` when the closing `>` gets typed
* Multiple cursors: holding Ctrl pressed while selecting words results in multiple cursors. If you type, all selections will update

This demo uses the ''Sublime Text Keymap'' - See the Sidebar Tab ''Keymap'' or the [[Sublime Text Keymap Readme|$:/plugins/tiddlywiki/codemirror-keymap-sublime-text/readme]] for all available keyboard shortcuts

To add the base plugin to your own ~TiddlyWiki5, just drag this link to the browser window:

[[$:/plugins/tiddlywiki/codemirror]]

[[CodeMirror plugin Readme|$:/plugins/tiddlywiki/codemirror/readme]]

[[CodeMirror plugin Usage|$:/plugins/tiddlywiki/codemirror/usage]]

To add ~AddOns to your ~CodeMirror plugin, go to ~ControlPanel - Plugins and drag the desired ~AddOn to your wiki browser window

The configuration for ~AddOns is done automatically, configuration for sensible settings can be done in ~ControlPanel - Settings - ~CodeMirror
Add a demo edition for CodeMirror 2013-10-25 08:50:30 +00:00			`title: HelloThere`

CodeMirror 5.36.0 modularized (#3184) * v5.35.1 * codemirror 5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * adding search&replace and autocomplete * update version number * add jump-to-line.js required for search&replace * adding show-hint.js required by autocomplete * adding basic autocomplete for any word * adding autocomplete css * adding new files to tiddlywiki.files * forgot adding search.js * minify 'em all * Delete vim.js * Delete sublime.js * Delete emacs.js * Delete anyword-hint.js * Delete show-hint.css * Delete show-hint.js * Update config.tid * Update tiddlywiki.files * Update tiddlywiki.files * Update config.tid * Update config.tid * Update config.tid * Delete dialog.js * Delete dialog.css * Delete jump-to-line.js * Delete search.js * Delete searchcursor.js * Update tiddlywiki.files * Update tiddlywiki.files * Update tiddlywiki.files * add search-and-replace cm-addon as plugin * add autocomplete cm-addon as plugin * add fullscreen-editing cm-addon as plugin * add keymaps as plugins + cleanup * add highlighting modes as plugins * small update on usage.tid * moved multiplex.js to htmlembedded mode - the only one using it * config/CodeMirror update * how to disable line numbers * how to change CM theme * add closebrackets and closetags addons * packaging a base-addon * move meta.js from codemirror to base addon * inputStyle: textarea -> prevents contenteditable on mobile browsers, keeps focus when clicking toolbar buttons, prevents import on paste * default config no line numbers * temporary add panel plugin for demo * put base-plugin back to codemirror editor * searchcursor to searchnreplace plugin * bad copypasta mistake * another typo * stripped down meta.js + moved matchbrackets to closebrackets plugin * remove panel * change module-type to codemirro and make init "require" dynamic. * make config handling dynamic with sensible defaults * make cm settings translateable * delete multids. they will be replaced * add auto-config tiddlers * dynamically create config structure for CM * fix filename * change typo * kitchensink config, plus change plugin description for better sorting. * add matchBrackets config tiddler * RIP codeblock * removed install instructions from readme - codemirror usage tiddler still todo * control panel settings for cm base * add setting for auto-close tags * adding fontfamily settings and theme settings * change tags for settings from $:/tags/ControlPanel/Settings to $:/tags/ControlPanel/Settings/CodeMirror * more usage info * more usage info * update to v5.36.0 * ugly hack enables highlighting and tag-closing for vnd.tiddlywiki and x-tiddlywiki * disable auto-indent for vnd.tiddlywiki & x-tiddlywiki and add some hidden settings * remove engine.js hack * meta.js -> tw-meta.js * codemirror settings tab * rename tiddler to tw-meta.js * make editor font monospace or sans-serif - dropdown select * make editor font monospace or sans-serif - dropdown select * now using correct tiddler for editor font setting * better usage doc * make markdown-mode require tw-meta * add more themes info * add active-line highlighting option * mini usage change * add integer type to engine.js config-getter * blink rate config type string * correct engine.js * license for base-plugin, usage link in settings tab * codemirrordemo hellothere update * codemirrordemo hellothere update * Update license.tid * codemirror demo sidebarlayout, license * license headers to addon files * license formatting & forgot what year we have * license formatting & forgot what year we have & codemirror demo sitetitle sitesubtitle * more informations 'try-this-style' for codemirrordemo hellothere * codemirror demo sitetitle & cm fontfamily * hellothere * font-family setting must be editor-font-family, not code-font-family * add basic keyboard shortcuts table * shortcuts change to not interfere with toolbar shortcuts - needs testing - vim and emacs todo * formatting * controlpanel change keymap - default keymap is default * ctrl-T becomes Alt-T in default keymap * adjustments for codemirror demo * demo: hellothere - hint for sidebar keymap cheatsheet * toolbar focus fix + remove console log * engine.js cleanup * formatting * reverting focus fix * indenting engine.js * hoping that indenting gets better 2018-04-06 16:34:50 +00:00			`This is a demo of [[TiddlyWiki5\|https://tiddlywiki.com]] incorporating a plugin for the [[CodeMirror\|http://codemirror.net/]] text editor for the web.`
Add a demo edition for CodeMirror 2013-10-25 08:50:30 +00:00
CodeMirror 5.36.0 modularized (#3184) * v5.35.1 * codemirror 5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * adding search&replace and autocomplete * update version number * add jump-to-line.js required for search&replace * adding show-hint.js required by autocomplete * adding basic autocomplete for any word * adding autocomplete css * adding new files to tiddlywiki.files * forgot adding search.js * minify 'em all * Delete vim.js * Delete sublime.js * Delete emacs.js * Delete anyword-hint.js * Delete show-hint.css * Delete show-hint.js * Update config.tid * Update tiddlywiki.files * Update tiddlywiki.files * Update config.tid * Update config.tid * Update config.tid * Delete dialog.js * Delete dialog.css * Delete jump-to-line.js * Delete search.js * Delete searchcursor.js * Update tiddlywiki.files * Update tiddlywiki.files * Update tiddlywiki.files * add search-and-replace cm-addon as plugin * add autocomplete cm-addon as plugin * add fullscreen-editing cm-addon as plugin * add keymaps as plugins + cleanup * add highlighting modes as plugins * small update on usage.tid * moved multiplex.js to htmlembedded mode - the only one using it * config/CodeMirror update * how to disable line numbers * how to change CM theme * add closebrackets and closetags addons * packaging a base-addon * move meta.js from codemirror to base addon * inputStyle: textarea -> prevents contenteditable on mobile browsers, keeps focus when clicking toolbar buttons, prevents import on paste * default config no line numbers * temporary add panel plugin for demo * put base-plugin back to codemirror editor * searchcursor to searchnreplace plugin * bad copypasta mistake * another typo * stripped down meta.js + moved matchbrackets to closebrackets plugin * remove panel * change module-type to codemirro and make init "require" dynamic. * make config handling dynamic with sensible defaults * make cm settings translateable * delete multids. they will be replaced * add auto-config tiddlers * dynamically create config structure for CM * fix filename * change typo * kitchensink config, plus change plugin description for better sorting. * add matchBrackets config tiddler * RIP codeblock * removed install instructions from readme - codemirror usage tiddler still todo * control panel settings for cm base * add setting for auto-close tags * adding fontfamily settings and theme settings * change tags for settings from $:/tags/ControlPanel/Settings to $:/tags/ControlPanel/Settings/CodeMirror * more usage info * more usage info * update to v5.36.0 * ugly hack enables highlighting and tag-closing for vnd.tiddlywiki and x-tiddlywiki * disable auto-indent for vnd.tiddlywiki & x-tiddlywiki and add some hidden settings * remove engine.js hack * meta.js -> tw-meta.js * codemirror settings tab * rename tiddler to tw-meta.js * make editor font monospace or sans-serif - dropdown select * make editor font monospace or sans-serif - dropdown select * now using correct tiddler for editor font setting * better usage doc * make markdown-mode require tw-meta * add more themes info * add active-line highlighting option * mini usage change * add integer type to engine.js config-getter * blink rate config type string * correct engine.js * license for base-plugin, usage link in settings tab * codemirrordemo hellothere update * codemirrordemo hellothere update * Update license.tid * codemirror demo sidebarlayout, license * license headers to addon files * license formatting & forgot what year we have * license formatting & forgot what year we have & codemirror demo sitetitle sitesubtitle * more informations 'try-this-style' for codemirrordemo hellothere * codemirror demo sitetitle & cm fontfamily * hellothere * font-family setting must be editor-font-family, not code-font-family * add basic keyboard shortcuts table * shortcuts change to not interfere with toolbar shortcuts - needs testing - vim and emacs todo * formatting * controlpanel change keymap - default keymap is default * ctrl-T becomes Alt-T in default keymap * adjustments for codemirror demo * demo: hellothere - hint for sidebar keymap cheatsheet * toolbar focus fix + remove console log * engine.js cleanup * formatting * reverting focus fix * indenting engine.js * hoping that indenting gets better 2018-04-06 16:34:50 +00:00			`The ~CodeMirror plugin can be extended with ~AddOns for more functionality:`
Add a demo edition for CodeMirror 2013-10-25 08:50:30 +00:00
CodeMirror 5.36.0 modularized (#3184) * v5.35.1 * codemirror 5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * adding search&replace and autocomplete * update version number * add jump-to-line.js required for search&replace * adding show-hint.js required by autocomplete * adding basic autocomplete for any word * adding autocomplete css * adding new files to tiddlywiki.files * forgot adding search.js * minify 'em all * Delete vim.js * Delete sublime.js * Delete emacs.js * Delete anyword-hint.js * Delete show-hint.css * Delete show-hint.js * Update config.tid * Update tiddlywiki.files * Update tiddlywiki.files * Update config.tid * Update config.tid * Update config.tid * Delete dialog.js * Delete dialog.css * Delete jump-to-line.js * Delete search.js * Delete searchcursor.js * Update tiddlywiki.files * Update tiddlywiki.files * Update tiddlywiki.files * add search-and-replace cm-addon as plugin * add autocomplete cm-addon as plugin * add fullscreen-editing cm-addon as plugin * add keymaps as plugins + cleanup * add highlighting modes as plugins * small update on usage.tid * moved multiplex.js to htmlembedded mode - the only one using it * config/CodeMirror update * how to disable line numbers * how to change CM theme * add closebrackets and closetags addons * packaging a base-addon * move meta.js from codemirror to base addon * inputStyle: textarea -> prevents contenteditable on mobile browsers, keeps focus when clicking toolbar buttons, prevents import on paste * default config no line numbers * temporary add panel plugin for demo * put base-plugin back to codemirror editor * searchcursor to searchnreplace plugin * bad copypasta mistake * another typo * stripped down meta.js + moved matchbrackets to closebrackets plugin * remove panel * change module-type to codemirro and make init "require" dynamic. * make config handling dynamic with sensible defaults * make cm settings translateable * delete multids. they will be replaced * add auto-config tiddlers * dynamically create config structure for CM * fix filename * change typo * kitchensink config, plus change plugin description for better sorting. * add matchBrackets config tiddler * RIP codeblock * removed install instructions from readme - codemirror usage tiddler still todo * control panel settings for cm base * add setting for auto-close tags * adding fontfamily settings and theme settings * change tags for settings from $:/tags/ControlPanel/Settings to $:/tags/ControlPanel/Settings/CodeMirror * more usage info * more usage info * update to v5.36.0 * ugly hack enables highlighting and tag-closing for vnd.tiddlywiki and x-tiddlywiki * disable auto-indent for vnd.tiddlywiki & x-tiddlywiki and add some hidden settings * remove engine.js hack * meta.js -> tw-meta.js * codemirror settings tab * rename tiddler to tw-meta.js * make editor font monospace or sans-serif - dropdown select * make editor font monospace or sans-serif - dropdown select * now using correct tiddler for editor font setting * better usage doc * make markdown-mode require tw-meta * add more themes info * add active-line highlighting option * mini usage change * add integer type to engine.js config-getter * blink rate config type string * correct engine.js * license for base-plugin, usage link in settings tab * codemirrordemo hellothere update * codemirrordemo hellothere update * Update license.tid * codemirror demo sidebarlayout, license * license headers to addon files * license formatting & forgot what year we have * license formatting & forgot what year we have & codemirror demo sitetitle sitesubtitle * more informations 'try-this-style' for codemirrordemo hellothere * codemirror demo sitetitle & cm fontfamily * hellothere * font-family setting must be editor-font-family, not code-font-family * add basic keyboard shortcuts table * shortcuts change to not interfere with toolbar shortcuts - needs testing - vim and emacs todo * formatting * controlpanel change keymap - default keymap is default * ctrl-T becomes Alt-T in default keymap * adjustments for codemirror demo * demo: hellothere - hint for sidebar keymap cheatsheet * toolbar focus fix + remove console log * engine.js cleanup * formatting * reverting focus fix * indenting engine.js * hoping that indenting gets better 2018-04-06 16:34:50 +00:00			`* Search and Replace`
			`* Text - Autocompletion`
			`* Syntax highlighting`
			`* Fullscreen editing`
			`* Keymaps in the style of Emacs, Sublime Text or Vim`
			`* Closing Brackets`
			`* Closing Tags`

			`NOTE: This demo has the ''Sublime Text'' keymap installed.`

			`!!!Try editing the tiddler [[Draft of 'LoremIpsum']] to try out the editor.`

			`Some commands and functions to try:`

			`* Ctrl+F : Search panel to search for expressions`
			`* Ctrl+H (sublime text shortcut, default is Ctrl+Shift+R) : Search and Replace`
			`* Ctrl+Space : Triggers Autocompletion`
			* typing an opening bracket like `{` automatically creates the closing bracket `}`
			* tiddlers with type `application/javascript`, `application/json`, `text/css`, `text/html`, `text/xml`, `text/x-markdown` and `text/x-tiddlywiki` have Syntax Highlighting
			* tiddlers with type `text/html` automatically close tags like `<div>` when the closing `>` gets typed
			`* Multiple cursors: holding Ctrl pressed while selecting words results in multiple cursors. If you type, all selections will update`

			`This demo uses the ''Sublime Text Keymap'' - See the Sidebar Tab ''Keymap'' or the [[Sublime Text Keymap Readme\|$:/plugins/tiddlywiki/codemirror-keymap-sublime-text/readme]] for all available keyboard shortcuts`

			`To add the base plugin to your own ~TiddlyWiki5, just drag this link to the browser window:`
Add a demo edition for CodeMirror 2013-10-25 08:50:30 +00:00
			`[[$:/plugins/tiddlywiki/codemirror]]`
Update codemirror plugin docs @pmario and @jbolila - could you kindly check whether the docs cover everything? 2014-01-25 19:34:32 +00:00
CodeMirror 5.36.0 modularized (#3184) * v5.35.1 * codemirror 5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * v5.35.1 * adding search&replace and autocomplete * update version number * add jump-to-line.js required for search&replace * adding show-hint.js required by autocomplete * adding basic autocomplete for any word * adding autocomplete css * adding new files to tiddlywiki.files * forgot adding search.js * minify 'em all * Delete vim.js * Delete sublime.js * Delete emacs.js * Delete anyword-hint.js * Delete show-hint.css * Delete show-hint.js * Update config.tid * Update tiddlywiki.files * Update tiddlywiki.files * Update config.tid * Update config.tid * Update config.tid * Delete dialog.js * Delete dialog.css * Delete jump-to-line.js * Delete search.js * Delete searchcursor.js * Update tiddlywiki.files * Update tiddlywiki.files * Update tiddlywiki.files * add search-and-replace cm-addon as plugin * add autocomplete cm-addon as plugin * add fullscreen-editing cm-addon as plugin * add keymaps as plugins + cleanup * add highlighting modes as plugins * small update on usage.tid * moved multiplex.js to htmlembedded mode - the only one using it * config/CodeMirror update * how to disable line numbers * how to change CM theme * add closebrackets and closetags addons * packaging a base-addon * move meta.js from codemirror to base addon * inputStyle: textarea -> prevents contenteditable on mobile browsers, keeps focus when clicking toolbar buttons, prevents import on paste * default config no line numbers * temporary add panel plugin for demo * put base-plugin back to codemirror editor * searchcursor to searchnreplace plugin * bad copypasta mistake * another typo * stripped down meta.js + moved matchbrackets to closebrackets plugin * remove panel * change module-type to codemirro and make init "require" dynamic. * make config handling dynamic with sensible defaults * make cm settings translateable * delete multids. they will be replaced * add auto-config tiddlers * dynamically create config structure for CM * fix filename * change typo * kitchensink config, plus change plugin description for better sorting. * add matchBrackets config tiddler * RIP codeblock * removed install instructions from readme - codemirror usage tiddler still todo * control panel settings for cm base * add setting for auto-close tags * adding fontfamily settings and theme settings * change tags for settings from $:/tags/ControlPanel/Settings to $:/tags/ControlPanel/Settings/CodeMirror * more usage info * more usage info * update to v5.36.0 * ugly hack enables highlighting and tag-closing for vnd.tiddlywiki and x-tiddlywiki * disable auto-indent for vnd.tiddlywiki & x-tiddlywiki and add some hidden settings * remove engine.js hack * meta.js -> tw-meta.js * codemirror settings tab * rename tiddler to tw-meta.js * make editor font monospace or sans-serif - dropdown select * make editor font monospace or sans-serif - dropdown select * now using correct tiddler for editor font setting * better usage doc * make markdown-mode require tw-meta * add more themes info * add active-line highlighting option * mini usage change * add integer type to engine.js config-getter * blink rate config type string * correct engine.js * license for base-plugin, usage link in settings tab * codemirrordemo hellothere update * codemirrordemo hellothere update * Update license.tid * codemirror demo sidebarlayout, license * license headers to addon files * license formatting & forgot what year we have * license formatting & forgot what year we have & codemirror demo sitetitle sitesubtitle * more informations 'try-this-style' for codemirrordemo hellothere * codemirror demo sitetitle & cm fontfamily * hellothere * font-family setting must be editor-font-family, not code-font-family * add basic keyboard shortcuts table * shortcuts change to not interfere with toolbar shortcuts - needs testing - vim and emacs todo * formatting * controlpanel change keymap - default keymap is default * ctrl-T becomes Alt-T in default keymap * adjustments for codemirror demo * demo: hellothere - hint for sidebar keymap cheatsheet * toolbar focus fix + remove console log * engine.js cleanup * formatting * reverting focus fix * indenting engine.js * hoping that indenting gets better 2018-04-06 16:34:50 +00:00			`[[CodeMirror plugin Readme\|$:/plugins/tiddlywiki/codemirror/readme]]`

			`[[CodeMirror plugin Usage\|$:/plugins/tiddlywiki/codemirror/usage]]`

			`To add ~AddOns to your ~CodeMirror plugin, go to ~ControlPanel - Plugins and drag the desired ~AddOn to your wiki browser window`

			`The configuration for ~AddOns is done automatically, configuration for sensible settings can be done in ~ControlPanel - Settings - ~CodeMirror`