Marijn Haverbeke marijnh

## theme-ttcn.js
import {HighlightStyle, syntaxHighlighting} from "@codemirror/language"
import {tags as t} from "@lezer/highlight"

export const ttcnHighlightStyle = HighlightStyle.define([
  {tag: t.quote,
   color: "#090"},
  {tag: t.deleted,
   color: "#d44"},
  {tag: t.inserted,
   color: "#292"},

## pixel.js
/*
# Clean UI programming in a vacuum

This app was written for Chapter 19 in the 3rd edition of Eloquent
JavaScript—it aims to demonstrate modern UI programming without
depending on a specific framework or library.

Its convention is that components have an interface like this:

```

## highlighting.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                marijnh
                / highlighting.md
            
            
              Last active
              April 28, 2017 10:10
            
          
    (This is a response to https://github.com/google/xi-editor/blob/master/doc/rope_science/rope_science_11.md that didn't fit in a tweet.)
CodeMirror uses a largely similar approach, with a somewhat different framing.
Firstly, it stores the mode (highlighter) state directly in the document data structure (which I probably wouldn't do again if I were to redesign this), not in a separate cache. Each line can have an optional 'highlight state after this line' field. During highlighting, a cached state is left every N lines.
The frontier is simply the line number up to which point highlighting has happened. When you edit above the frontier, it it moved back to the line before the change.
Highlighting never proceeds past the end of the viewport. So startup is cheap (only highlight the first screenful), and in the 99% case of changes happening inside the viewport, re-highlighting complexity is bounded by the size of the viewport, since only the area between the change and the end of the viewport needs to be proces

  
## gist:209c896ac96db277765bdb93ab3f52f3
Never see JavaDoc again

Inline documentation is great. JSDoc/JavaDoc syntax is an acquired taste that I never managed to acquire. So I want to show you an alternative tool with alternative syntax that I wrote.

## node-view.js
const {EditorState, Selection} = require("prosemirror-state")
const {MenuBarEditorView} = require("prosemirror-menu")
const {DOMParser, DOMSerializer, Schema} = require("prosemirror-model")
const {schema: baseSchema} = require("prosemirror-schema-basic")
const {exampleSetup} = require("prosemirror-example-setup")
const {keymap} = require("prosemirror-keymap")
const CodeMirror = require("codemirror")
require("codemirror/mode/javascript/javascript")

let view, menuView, schema = new Schema({

## checkanchors.js
let links = document.querySelectorAll("a[href]")
let base = /^[^#]*/.exec(document.location)[0] + "#"
for (let i = 0; i < links.length; i++) {
  let link = links[i], anchor
  if (link.href.indexOf(base) == 0 && !document.getElementById(anchor = decodeURIComponent(link.href.slice(base.length))))
    console.log("Missing anchor: " + anchor)
}

## changedRanges.js
function changedRanges(history, group) {
  let ranges = []
  history.forEach((step, i) => {
    let map = step.posMap()
    ranges = ranges.map(range => {
      let from = map.map(range.from, 1), to = Math.max(from, map.map(range.to, -1))
      return {from, to}
    })
    if (group.indexOf(i) > -1) {
      let newRanges = []

## test.html
<!doctype html>

<div contenteditable=true style="border: 1px solid black">Foo bar</div>

<p>Put the cursor at the start of the editable content above, so
that the keyboard is in uppercase mode. Then press <button>this
button</button> to move the cursor to the end of 'foo'. Note that the
keyboard stays in uppercase mode althrough lowercase would be
appropriate for the new context.</p>

## highlight.js
import {Pos} from "../src/model"

function rangeFromTransform(tr) {
  let from, to
  for (let i = 0; i < tr.steps.length; i++) {
    let step = tr.steps[i], map = tr.maps[i]
    let stepFrom = map.map(step.from || step.pos, -1).pos
    let stepTo = map.map(step.to || step.pos, 1).pos
    from = from ? map.map(from, -1).pos.min(stepFrom) : stepFrom
    to = to ? map.map(to, 1).pos.max(stepTo) : stepTo

## merge-demo.html
<!doctype html>

<title>CodeMirror: merge view demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel=stylesheet href="../lib/codemirror.css">
<link rel=stylesheet href="../addon/merge/merge.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<style>
	import {HighlightStyle, syntaxHighlighting} from "@codemirror/language"
	import {tags as t} from "@lezer/highlight"

	export const ttcnHighlightStyle = HighlightStyle.define([
	{tag: t.quote,
	color: "#090"},
	{tag: t.deleted,
	color: "#d44"},
	{tag: t.inserted,
	color: "#292"},
	/*
	# Clean UI programming in a vacuum

	This app was written for Chapter 19 in the 3rd edition of Eloquent
	JavaScript—it aims to demonstrate modern UI programming without
	depending on a specific framework or library.

	Its convention is that components have an interface like this:

	```
	Never see JavaDoc again

	Inline documentation is great. JSDoc/JavaDoc syntax is an acquired taste that I never managed to acquire. So I want to show you an alternative tool with alternative syntax that I wrote.
	const {EditorState, Selection} = require("prosemirror-state")
	const {MenuBarEditorView} = require("prosemirror-menu")
	const {DOMParser, DOMSerializer, Schema} = require("prosemirror-model")
	const {schema: baseSchema} = require("prosemirror-schema-basic")
	const {exampleSetup} = require("prosemirror-example-setup")
	const {keymap} = require("prosemirror-keymap")
	const CodeMirror = require("codemirror")
	require("codemirror/mode/javascript/javascript")

	let view, menuView, schema = new Schema({
	let links = document.querySelectorAll("a[href]")
	let base = /^[^#]*/.exec(document.location)[0] + "#"
	for (let i = 0; i < links.length; i++) {
	let link = links[i], anchor
	if (link.href.indexOf(base) == 0 && !document.getElementById(anchor = decodeURIComponent(link.href.slice(base.length))))
	console.log("Missing anchor: " + anchor)
	}
	function changedRanges(history, group) {
	let ranges = []
	history.forEach((step, i) => {
	let map = step.posMap()
	ranges = ranges.map(range => {
	let from = map.map(range.from, 1), to = Math.max(from, map.map(range.to, -1))
	return {from, to}
	})
	if (group.indexOf(i) > -1) {
	let newRanges = []
	<!doctype html>

	<div contenteditable=true style="border: 1px solid black">Foo bar</div>

	<p>Put the cursor at the start of the editable content above, so
	that the keyboard is in uppercase mode. Then press <button>this
	button</button> to move the cursor to the end of 'foo'. Note that the
	keyboard stays in uppercase mode althrough lowercase would be
	appropriate for the new context.</p>
	import {Pos} from "../src/model"

	function rangeFromTransform(tr) {
	let from, to
	for (let i = 0; i < tr.steps.length; i++) {
	let step = tr.steps[i], map = tr.maps[i]
	let stepFrom = map.map(step.from \|\| step.pos, -1).pos
	let stepTo = map.map(step.to \|\| step.pos, 1).pos
	from = from ? map.map(from, -1).pos.min(stepFrom) : stepFrom
	to = to ? map.map(to, 1).pos.max(stepTo) : stepTo
	<!doctype html>

	<title>CodeMirror: merge view demo</title>
	<meta charset="utf-8"/>
	<link rel=stylesheet href="../doc/docs.css">

	<link rel=stylesheet href="../lib/codemirror.css">
	<link rel=stylesheet href="../addon/merge/merge.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
	<style>