From c2f6143a84b2d66a01458dabde3b907db0cbc6c1 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 19 Nov 2016 17:08:37 +0000 Subject: [PATCH 01/16] support loading and display of css blocks and injection into dom --- css/ide.css | 3 ++- index.html | 2 ++ src/ide.ts | 5 +++-- src/ide/spans.ts | 6 +++--- src/runtime/parser.ts | 17 ++++++++++------- src/runtime/runtimeClient.ts | 7 +++++++ 6 files changed, 27 insertions(+), 13 deletions(-) diff --git a/css/ide.css b/css/ide.css index 24d6555df..7c520a6ee 100644 --- a/css/ide.css +++ b/css/ide.css @@ -119,6 +119,7 @@ body { justify-content: stretch; } .CodeMirror .STRONG { font-weight:bold; } .CodeMirror .EMPH { font-style:italic; } .CodeMirror .CODE { margin-left: 10px; margin-right:50px; border-left:5px solid #eaeaea; background: #f4f4f4; font-family: "Inconsolata", "Monaco", "Consolas", "Ubuntu Mono", monospace; } +.CodeMirror .CODE.css { background: #fff7e9; border-left-color: #ffedcc;} .CodeMirror .CODE-TEXT { line-height:19px; padding-left:30px; transition: opacity 0.3s; } .CodeMirror .CODE-TEXT.CODE-DISABLED { opacity: 0.6; } .CodeMirror span.CODE { color: #0076ce; background:none; margin:0; padding:0; border:none; } @@ -176,7 +177,7 @@ body { justify-content: stretch; } * Format Bars \****************************************************************************/ .editor-pane .new-block-bar { position: absolute; top: 0; left: 0; margin-left: -28px; display: flex; flex-direction: row; width: 28px; overflow: hidden; transition: width 0.15s; z-index: 5; color: #666; border-radius:5px; border:1px solid #ddd; font-size:10pt; background:white; } -.editor-pane .new-block-bar.active { width: 246px; } +.editor-pane .new-block-bar.active { width: initial; } .editor-pane .new-block-bar > .new-block-bar-toggle, diff --git a/index.html b/index.html index 151c6cfc8..13ececb70 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,8 @@ + + diff --git a/src/ide.ts b/src/ide.ts index 66b439644..65aa07519 100644 --- a/src/ide.ts +++ b/src/ide.ts @@ -1201,7 +1201,7 @@ export class Editor { return neue; } - format(source:{type:string, level?: number, listData?: {type:"ordered"|"bullet", start?: number}}, refocus = false) { + format(source:{type:string, info?:string, level?: number, listData?: {type:"ordered"|"bullet", start?: number}}, refocus = false) { let SpanClass:(typeof Span) = spanTypes[source.type] || spanTypes["default"]; let style = SpanClass.style(); @@ -1935,7 +1935,8 @@ function newBlockBar(elem:EditorBarElem):Elem { editor.queueUpdate(); }}, {c: "flex-row controls", children: [ - {text: "block", click: () => editor.format({type: "code_block"}, true)}, + {text: "Eve", click: () => editor.format({type: "code_block"}, true)}, + {text: "CSS", click: () => editor.format({type: "code_block", info: "css"}, true)}, {text: "list", click: () => editor.format({type: "item"}, true)}, {text: "H1", click: () => editor.format({type: "heading", level: 1}, true)}, {text: "H2", click: () => editor.format({type: "heading", level: 2}, true)}, diff --git a/src/ide/spans.ts b/src/ide/spans.ts index d5a747f15..2a126b6f9 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -617,7 +617,7 @@ export class CodeBlockSpan extends BlockSpan { protected footerWidgetElem:HTMLElement; apply(from:Position, to:Position, origin = "+input") { - this.lineBackgroundClass = "code"; + this.lineBackgroundClass = "code" + ((this.source.info && this.source.info.toLowerCase().indexOf("css") === 0) ? " css" : ""); this.lineTextClass = "code-text"; if(this.source.disabled) this.disabled = this.source.disabled; else this.disabled = false; @@ -649,7 +649,7 @@ export class CodeBlockSpan extends BlockSpan { disable() { if(!this.disabled) { - this.source.info = "eve disabled"; + this.source.info = (this.source.info ? this.source.info : "eve") + " disabled"; // @FIXME: We don't currently style this because of a bug in updateLineClasses. // It's unable to intelligently remove unsupported classes, so we'd have to manually clear line classes. // We can come back to this later if we care. @@ -665,7 +665,7 @@ export class CodeBlockSpan extends BlockSpan { enable() { if(this.disabled) { - this.source.info = "eve"; + this.source.info = this.source.info.replace(/ disabled/, ""); this.disabled = false; this.refresh(); diff --git a/src/runtime/parser.ts b/src/runtime/parser.ts index a69bae938..22d5248d4 100644 --- a/src/runtime/parser.ts +++ b/src/runtime/parser.ts @@ -1415,17 +1415,20 @@ export function parseDoc(doc, docId = `doc|${docIx++}`) { let allErrors = []; for(let block of blocks) { extraInfo[block.id] = {info: block.info}; + if(block.info.indexOf("disabled") > -1) { + extraInfo[block.id].disabled = true; + } if(block.info !== "" && block.info.indexOf("eve") === -1) continue; let {results, lex, errors} = parseBlock(block.literal, block.id, block.startOffset, spans, extraInfo); // if this block is disabled, we want the parsed spans and such, but we don't want // the block to be in the set sent to the builder - if(block.info.indexOf("disabled") > -1) { - extraInfo[block.id].disabled = true; - } else if(errors.length) { - allErrors.push(errors); - } else { - results.endOffset = block.endOffset; - parsedBlocks.push(results); + if(!extraInfo[block.id].disabled) { + if(errors.length) { + allErrors.push(errors); + } else { + results.endOffset = block.endOffset; + parsedBlocks.push(results); + } } } return { diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index 22946c9e3..bba60af89 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -157,6 +157,13 @@ export abstract class RuntimeClient { this.evaluation.registerDatabase("session", session); changes.commit(); this.evaluation.fixpoint(changes); + + var css = ""; + this.lastParse.code.replace(/```css\n([\w\W]*?)```/g, (g0, g1) => { // \n excludes disabled blocks + css += g1; + }); + + document.getElementById("app-styles").innerHTML = css; } else { let spans = []; let extraInfo = {}; From 68ff47d1dfc2623c6eccc9170a779a222898590d Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 19 Nov 2016 20:15:10 +0000 Subject: [PATCH 02/16] inject styles on document load and block checking/unchecking --- src/runtime/runtimeClient.ts | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index bba60af89..c118ce3b2 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -81,9 +81,21 @@ export abstract class RuntimeClient { } this.evaluation = ev; + + this.updateStyles(); + return ev; } + updateStyles() { + var css = ""; + this.lastParse.code.replace(/```css\n([\w\W]*?)```/g, (g0, g1) => { // \n excludes disabled blocks + css += g1; + }); + + document.getElementById("app-styles").innerHTML = css; + } + sendErrors(errors) { if(!errors.length) return; let spans = []; @@ -157,13 +169,8 @@ export abstract class RuntimeClient { this.evaluation.registerDatabase("session", session); changes.commit(); this.evaluation.fixpoint(changes); - - var css = ""; - this.lastParse.code.replace(/```css\n([\w\W]*?)```/g, (g0, g1) => { // \n excludes disabled blocks - css += g1; - }); - - document.getElementById("app-styles").innerHTML = css; + + this.updateStyles(); } else { let spans = []; let extraInfo = {}; From caafbdf25fdcc6a865c2e26608ab614065363f07 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 3 Dec 2016 21:00:50 +0000 Subject: [PATCH 03/16] send css to client as part of "parse" message --- src/client.ts | 2 +- src/ide.ts | 4 +++- src/runtime/runtimeClient.ts | 19 +++++-------------- 3 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/client.ts b/src/client.ts index 4aec68bd3..4657086dc 100644 --- a/src/client.ts +++ b/src/client.ts @@ -304,7 +304,7 @@ export class EveClient { _parse(data) { if(!this.showIDE) return; - this.ide.loadDocument(data.generation, data.text, data.spans, data.extraInfo); // @FIXME + this.ide.loadDocument(data.generation, data.text, data.spans, data.extraInfo, data.css); // @FIXME } _comments(data) { diff --git a/src/ide.ts b/src/ide.ts index e61cf88d1..9091fba01 100644 --- a/src/ide.ts +++ b/src/ide.ts @@ -2104,7 +2104,7 @@ export class IDE { this.navigator.loadWorkspace("root", directory, files); } - loadDocument(generation:number, text:string, packed:any[], attributes:{[id:string]: any|undefined}) { + loadDocument(generation:number, text:string, packed:any[], attributes:{[id:string]: any|undefined}, css:string) { if(generation < this.generation && generation !== undefined) return; if(this.loaded) { this.editor.updateDocument(packed, attributes); @@ -2123,6 +2123,8 @@ export class IDE { // Empty file } + document.getElementById("app-styles").innerHTML = css; + this.render(); } diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index 9d01b4544..b6d3ed640 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -81,20 +81,9 @@ export abstract class RuntimeClient { this.evaluation = ev; - this.updateStyles(); - return ev; } - updateStyles() { - var css = ""; - this.lastParse.code.replace(/```css\n([\w\W]*?)```/g, (g0, g1) => { // \n excludes disabled blocks - css += g1; - }); - - document.getElementById("app-styles").innerHTML = css; - } - sendErrors(errors) { if(!errors.length) return; let spans = []; @@ -144,7 +133,11 @@ export abstract class RuntimeClient { for(let error of buildErrors) { error.injectSpan(spans, extraInfo); } - this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo})); + var css = ""; + this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks + css += g1; + }); + this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css})); } else if(data.type === "eval") { if(this.evaluation !== undefined && data.persist) { let changes = this.evaluation.createChanges(); @@ -170,8 +163,6 @@ export abstract class RuntimeClient { this.evaluation.registerDatabase("session", session); changes.commit(); this.evaluation.fixpoint(changes); - - this.updateStyles(); } else { let spans = []; let extraInfo = {}; From 98db88ed89522bfc3f9e6290375f3fde4804aa8f Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 3 Dec 2016 23:00:58 +0000 Subject: [PATCH 04/16] extract syntax parsing logic from info into own function --- src/ide/spans.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/ide/spans.ts b/src/ide/spans.ts index 2a126b6f9..f3b17a272 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -616,8 +616,12 @@ export class CodeBlockSpan extends BlockSpan { protected footerWidget:CodeMirror.LineWidget; protected footerWidgetElem:HTMLElement; + syntax() : string { + return this.source.info ? this.source.info.toLowerCase().split(" ")[0] : "eve"; + } + apply(from:Position, to:Position, origin = "+input") { - this.lineBackgroundClass = "code" + ((this.source.info && this.source.info.toLowerCase().indexOf("css") === 0) ? " css" : ""); + this.lineBackgroundClass = "code " + this.syntax(); this.lineTextClass = "code-text"; if(this.source.disabled) this.disabled = this.source.disabled; else this.disabled = false; @@ -649,7 +653,7 @@ export class CodeBlockSpan extends BlockSpan { disable() { if(!this.disabled) { - this.source.info = (this.source.info ? this.source.info : "eve") + " disabled"; + this.source.info = this.syntax() + " disabled"; // @FIXME: We don't currently style this because of a bug in updateLineClasses. // It's unable to intelligently remove unsupported classes, so we'd have to manually clear line classes. // We can come back to this later if we care. @@ -665,7 +669,7 @@ export class CodeBlockSpan extends BlockSpan { enable() { if(this.disabled) { - this.source.info = this.source.info.replace(/ disabled/, ""); + this.source.info = this.syntax(); this.disabled = false; this.refresh(); From 9cb6338627db0cedfc752d06a16a08d5fd78d2a1 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 00:23:51 +0000 Subject: [PATCH 05/16] apply codemirror syntax highlighting to css blocks --- index.html | 1 + src/css.js | 825 +++++++++++++++++++++++++++++++++++++++++++++++ src/ide.ts | 1 + src/ide/spans.ts | 7 +- 4 files changed, 833 insertions(+), 1 deletion(-) create mode 100644 src/css.js diff --git a/index.html b/index.html index 6498a620e..5bf49e881 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ + diff --git a/src/css.js b/src/css.js new file mode 100644 index 000000000..985287f47 --- /dev/null +++ b/src/css.js @@ -0,0 +1,825 @@ +// CodeMirror, copyright (c) by Marijn Haverbeke and others +// Distributed under an MIT license: http://codemirror.net/LICENSE + +(function(mod) { + if (typeof exports == "object" && typeof module == "object") // CommonJS + mod(require("../../lib/codemirror")); + else if (typeof define == "function" && define.amd) // AMD + define(["../../lib/codemirror"], mod); + else // Plain browser env + mod(CodeMirror); +})(function(CodeMirror) { +"use strict"; + +CodeMirror.defineMode("css", function(config, parserConfig) { + var inline = parserConfig.inline + if (!parserConfig.propertyKeywords) parserConfig = CodeMirror.resolveMode("text/css"); + + var indentUnit = config.indentUnit, + tokenHooks = parserConfig.tokenHooks, + documentTypes = parserConfig.documentTypes || {}, + mediaTypes = parserConfig.mediaTypes || {}, + mediaFeatures = parserConfig.mediaFeatures || {}, + mediaValueKeywords = parserConfig.mediaValueKeywords || {}, + propertyKeywords = parserConfig.propertyKeywords || {}, + nonStandardPropertyKeywords = parserConfig.nonStandardPropertyKeywords || {}, + fontProperties = parserConfig.fontProperties || {}, + counterDescriptors = parserConfig.counterDescriptors || {}, + colorKeywords = parserConfig.colorKeywords || {}, + valueKeywords = parserConfig.valueKeywords || {}, + allowNested = parserConfig.allowNested, + supportsAtComponent = parserConfig.supportsAtComponent === true; + + var type, override; + function ret(style, tp) { type = tp; return style; } + + // Tokenizers + + function tokenBase(stream, state) { + var ch = stream.next(); + if (tokenHooks[ch]) { + var result = tokenHooks[ch](stream, state); + if (result !== false) return result; + } + if (ch == "@") { + stream.eatWhile(/[\w\\\-]/); + return ret("def", stream.current()); + } else if (ch == "=" || (ch == "~" || ch == "|") && stream.eat("=")) { + return ret(null, "compare"); + } else if (ch == "\"" || ch == "'") { + state.tokenize = tokenString(ch); + return state.tokenize(stream, state); + } else if (ch == "#") { + stream.eatWhile(/[\w\\\-]/); + return ret("atom", "hash"); + } else if (ch == "!") { + stream.match(/^\s*\w*/); + return ret("keyword", "important"); + } else if (/\d/.test(ch) || ch == "." && stream.eat(/\d/)) { + stream.eatWhile(/[\w.%]/); + return ret("number", "unit"); + } else if (ch === "-") { + if (/[\d.]/.test(stream.peek())) { + stream.eatWhile(/[\w.%]/); + return ret("number", "unit"); + } else if (stream.match(/^-[\w\\\-]+/)) { + stream.eatWhile(/[\w\\\-]/); + if (stream.match(/^\s*:/, false)) + return ret("variable-2", "variable-definition"); + return ret("variable-2", "variable"); + } else if (stream.match(/^\w+-/)) { + return ret("meta", "meta"); + } + } else if (/[,+>*\/]/.test(ch)) { + return ret(null, "select-op"); + } else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) { + return ret("qualifier", "qualifier"); + } else if (/[:;{}\[\]\(\)]/.test(ch)) { + return ret(null, ch); + } else if ((ch == "u" && stream.match(/rl(-prefix)?\(/)) || + (ch == "d" && stream.match("omain(")) || + (ch == "r" && stream.match("egexp("))) { + stream.backUp(1); + state.tokenize = tokenParenthesized; + return ret("property", "word"); + } else if (/[\w\\\-]/.test(ch)) { + stream.eatWhile(/[\w\\\-]/); + return ret("property", "word"); + } else { + return ret(null, null); + } + } + + function tokenString(quote) { + return function(stream, state) { + var escaped = false, ch; + while ((ch = stream.next()) != null) { + if (ch == quote && !escaped) { + if (quote == ")") stream.backUp(1); + break; + } + escaped = !escaped && ch == "\\"; + } + if (ch == quote || !escaped && quote != ")") state.tokenize = null; + return ret("string", "string"); + }; + } + + function tokenParenthesized(stream, state) { + stream.next(); // Must be '(' + if (!stream.match(/\s*[\"\')]/, false)) + state.tokenize = tokenString(")"); + else + state.tokenize = null; + return ret(null, "("); + } + + // Context management + + function Context(type, indent, prev) { + this.type = type; + this.indent = indent; + this.prev = prev; + } + + function pushContext(state, stream, type, indent) { + state.context = new Context(type, stream.indentation() + (indent === false ? 0 : indentUnit), state.context); + return type; + } + + function popContext(state) { + if (state.context.prev) + state.context = state.context.prev; + return state.context.type; + } + + function pass(type, stream, state) { + return states[state.context.type](type, stream, state); + } + function popAndPass(type, stream, state, n) { + for (var i = n || 1; i > 0; i--) + state.context = state.context.prev; + return pass(type, stream, state); + } + + // Parser + + function wordAsValue(stream) { + var word = stream.current().toLowerCase(); + if (valueKeywords.hasOwnProperty(word)) + override = "atom"; + else if (colorKeywords.hasOwnProperty(word)) + override = "keyword"; + else + override = "variable"; + } + + var states = {}; + + states.top = function(type, stream, state) { + if (type == "{") { + return pushContext(state, stream, "block"); + } else if (type == "}" && state.context.prev) { + return popContext(state); + } else if (supportsAtComponent && /@component/.test(type)) { + return pushContext(state, stream, "atComponentBlock"); + } else if (/^@(-moz-)?document$/.test(type)) { + return pushContext(state, stream, "documentTypes"); + } else if (/^@(media|supports|(-moz-)?document|import)$/.test(type)) { + return pushContext(state, stream, "atBlock"); + } else if (/^@(font-face|counter-style)/.test(type)) { + state.stateArg = type; + return "restricted_atBlock_before"; + } else if (/^@(-(moz|ms|o|webkit)-)?keyframes$/.test(type)) { + return "keyframes"; + } else if (type && type.charAt(0) == "@") { + return pushContext(state, stream, "at"); + } else if (type == "hash") { + override = "builtin"; + } else if (type == "word") { + override = "tag"; + } else if (type == "variable-definition") { + return "maybeprop"; + } else if (type == "interpolation") { + return pushContext(state, stream, "interpolation"); + } else if (type == ":") { + return "pseudo"; + } else if (allowNested && type == "(") { + return pushContext(state, stream, "parens"); + } + return state.context.type; + }; + + states.block = function(type, stream, state) { + if (type == "word") { + var word = stream.current().toLowerCase(); + if (propertyKeywords.hasOwnProperty(word)) { + override = "property"; + return "maybeprop"; + } else if (nonStandardPropertyKeywords.hasOwnProperty(word)) { + override = "string-2"; + return "maybeprop"; + } else if (allowNested) { + override = stream.match(/^\s*:(?:\s|$)/, false) ? "property" : "tag"; + return "block"; + } else { + override += " error"; + return "maybeprop"; + } + } else if (type == "meta") { + return "block"; + } else if (!allowNested && (type == "hash" || type == "qualifier")) { + override = "error"; + return "block"; + } else { + return states.top(type, stream, state); + } + }; + + states.maybeprop = function(type, stream, state) { + if (type == ":") return pushContext(state, stream, "prop"); + return pass(type, stream, state); + }; + + states.prop = function(type, stream, state) { + if (type == ";") return popContext(state); + if (type == "{" && allowNested) return pushContext(state, stream, "propBlock"); + if (type == "}" || type == "{") return popAndPass(type, stream, state); + if (type == "(") return pushContext(state, stream, "parens"); + + if (type == "hash" && !/^#([0-9a-fA-f]{3,4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/.test(stream.current())) { + override += " error"; + } else if (type == "word") { + wordAsValue(stream); + } else if (type == "interpolation") { + return pushContext(state, stream, "interpolation"); + } + return "prop"; + }; + + states.propBlock = function(type, _stream, state) { + if (type == "}") return popContext(state); + if (type == "word") { override = "property"; return "maybeprop"; } + return state.context.type; + }; + + states.parens = function(type, stream, state) { + if (type == "{" || type == "}") return popAndPass(type, stream, state); + if (type == ")") return popContext(state); + if (type == "(") return pushContext(state, stream, "parens"); + if (type == "interpolation") return pushContext(state, stream, "interpolation"); + if (type == "word") wordAsValue(stream); + return "parens"; + }; + + states.pseudo = function(type, stream, state) { + if (type == "word") { + override = "variable-3"; + return state.context.type; + } + return pass(type, stream, state); + }; + + states.documentTypes = function(type, stream, state) { + if (type == "word" && documentTypes.hasOwnProperty(stream.current())) { + override = "tag"; + return state.context.type; + } else { + return states.atBlock(type, stream, state); + } + }; + + states.atBlock = function(type, stream, state) { + if (type == "(") return pushContext(state, stream, "atBlock_parens"); + if (type == "}" || type == ";") return popAndPass(type, stream, state); + if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top"); + + if (type == "interpolation") return pushContext(state, stream, "interpolation"); + + if (type == "word") { + var word = stream.current().toLowerCase(); + if (word == "only" || word == "not" || word == "and" || word == "or") + override = "keyword"; + else if (mediaTypes.hasOwnProperty(word)) + override = "attribute"; + else if (mediaFeatures.hasOwnProperty(word)) + override = "property"; + else if (mediaValueKeywords.hasOwnProperty(word)) + override = "keyword"; + else if (propertyKeywords.hasOwnProperty(word)) + override = "property"; + else if (nonStandardPropertyKeywords.hasOwnProperty(word)) + override = "string-2"; + else if (valueKeywords.hasOwnProperty(word)) + override = "atom"; + else if (colorKeywords.hasOwnProperty(word)) + override = "keyword"; + else + override = "error"; + } + return state.context.type; + }; + + states.atComponentBlock = function(type, stream, state) { + if (type == "}") + return popAndPass(type, stream, state); + if (type == "{") + return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top", false); + if (type == "word") + override = "error"; + return state.context.type; + }; + + states.atBlock_parens = function(type, stream, state) { + if (type == ")") return popContext(state); + if (type == "{" || type == "}") return popAndPass(type, stream, state, 2); + return states.atBlock(type, stream, state); + }; + + states.restricted_atBlock_before = function(type, stream, state) { + if (type == "{") + return pushContext(state, stream, "restricted_atBlock"); + if (type == "word" && state.stateArg == "@counter-style") { + override = "variable"; + return "restricted_atBlock_before"; + } + return pass(type, stream, state); + }; + + states.restricted_atBlock = function(type, stream, state) { + if (type == "}") { + state.stateArg = null; + return popContext(state); + } + if (type == "word") { + if ((state.stateArg == "@font-face" && !fontProperties.hasOwnProperty(stream.current().toLowerCase())) || + (state.stateArg == "@counter-style" && !counterDescriptors.hasOwnProperty(stream.current().toLowerCase()))) + override = "error"; + else + override = "property"; + return "maybeprop"; + } + return "restricted_atBlock"; + }; + + states.keyframes = function(type, stream, state) { + if (type == "word") { override = "variable"; return "keyframes"; } + if (type == "{") return pushContext(state, stream, "top"); + return pass(type, stream, state); + }; + + states.at = function(type, stream, state) { + if (type == ";") return popContext(state); + if (type == "{" || type == "}") return popAndPass(type, stream, state); + if (type == "word") override = "tag"; + else if (type == "hash") override = "builtin"; + return "at"; + }; + + states.interpolation = function(type, stream, state) { + if (type == "}") return popContext(state); + if (type == "{" || type == ";") return popAndPass(type, stream, state); + if (type == "word") override = "variable"; + else if (type != "variable" && type != "(" && type != ")") override = "error"; + return "interpolation"; + }; + + return { + startState: function(base) { + return {tokenize: null, + state: inline ? "block" : "top", + stateArg: null, + context: new Context(inline ? "block" : "top", base || 0, null)}; + }, + + token: function(stream, state) { + if (!state.tokenize && stream.eatSpace()) return null; + var style = (state.tokenize || tokenBase)(stream, state); + if (style && typeof style == "object") { + type = style[1]; + style = style[0]; + } + override = style; + state.state = states[state.state](type, stream, state); + return override; + }, + + indent: function(state, textAfter) { + var cx = state.context, ch = textAfter && textAfter.charAt(0); + var indent = cx.indent; + if (cx.type == "prop" && (ch == "}" || ch == ")")) cx = cx.prev; + if (cx.prev) { + if (ch == "}" && (cx.type == "block" || cx.type == "top" || + cx.type == "interpolation" || cx.type == "restricted_atBlock")) { + // Resume indentation from parent context. + cx = cx.prev; + indent = cx.indent; + } else if (ch == ")" && (cx.type == "parens" || cx.type == "atBlock_parens") || + ch == "{" && (cx.type == "at" || cx.type == "atBlock")) { + // Dedent relative to current context. + indent = Math.max(0, cx.indent - indentUnit); + cx = cx.prev; + } + } + return indent; + }, + + electricChars: "}", + blockCommentStart: "/*", + blockCommentEnd: "*/", + fold: "brace" + }; +}); + + function keySet(array) { + var keys = {}; + for (var i = 0; i < array.length; ++i) { + keys[array[i].toLowerCase()] = true; + } + return keys; + } + + var documentTypes_ = [ + "domain", "regexp", "url", "url-prefix" + ], documentTypes = keySet(documentTypes_); + + var mediaTypes_ = [ + "all", "aural", "braille", "handheld", "print", "projection", "screen", + "tty", "tv", "embossed" + ], mediaTypes = keySet(mediaTypes_); + + var mediaFeatures_ = [ + "width", "min-width", "max-width", "height", "min-height", "max-height", + "device-width", "min-device-width", "max-device-width", "device-height", + "min-device-height", "max-device-height", "aspect-ratio", + "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio", + "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color", + "max-color", "color-index", "min-color-index", "max-color-index", + "monochrome", "min-monochrome", "max-monochrome", "resolution", + "min-resolution", "max-resolution", "scan", "grid", "orientation", + "device-pixel-ratio", "min-device-pixel-ratio", "max-device-pixel-ratio", + "pointer", "any-pointer", "hover", "any-hover" + ], mediaFeatures = keySet(mediaFeatures_); + + var mediaValueKeywords_ = [ + "landscape", "portrait", "none", "coarse", "fine", "on-demand", "hover", + "interlace", "progressive" + ], mediaValueKeywords = keySet(mediaValueKeywords_); + + var propertyKeywords_ = [ + "align-content", "align-items", "align-self", "alignment-adjust", + "alignment-baseline", "anchor-point", "animation", "animation-delay", + "animation-direction", "animation-duration", "animation-fill-mode", + "animation-iteration-count", "animation-name", "animation-play-state", + "animation-timing-function", "appearance", "azimuth", "backface-visibility", + "background", "background-attachment", "background-blend-mode", "background-clip", + "background-color", "background-image", "background-origin", "background-position", + "background-repeat", "background-size", "baseline-shift", "binding", + "bleed", "bookmark-label", "bookmark-level", "bookmark-state", + "bookmark-target", "border", "border-bottom", "border-bottom-color", + "border-bottom-left-radius", "border-bottom-right-radius", + "border-bottom-style", "border-bottom-width", "border-collapse", + "border-color", "border-image", "border-image-outset", + "border-image-repeat", "border-image-slice", "border-image-source", + "border-image-width", "border-left", "border-left-color", + "border-left-style", "border-left-width", "border-radius", "border-right", + "border-right-color", "border-right-style", "border-right-width", + "border-spacing", "border-style", "border-top", "border-top-color", + "border-top-left-radius", "border-top-right-radius", "border-top-style", + "border-top-width", "border-width", "bottom", "box-decoration-break", + "box-shadow", "box-sizing", "break-after", "break-before", "break-inside", + "caption-side", "clear", "clip", "color", "color-profile", "column-count", + "column-fill", "column-gap", "column-rule", "column-rule-color", + "column-rule-style", "column-rule-width", "column-span", "column-width", + "columns", "content", "counter-increment", "counter-reset", "crop", "cue", + "cue-after", "cue-before", "cursor", "direction", "display", + "dominant-baseline", "drop-initial-after-adjust", + "drop-initial-after-align", "drop-initial-before-adjust", + "drop-initial-before-align", "drop-initial-size", "drop-initial-value", + "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis", + "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", + "float", "float-offset", "flow-from", "flow-into", "font", "font-feature-settings", + "font-family", "font-kerning", "font-language-override", "font-size", "font-size-adjust", + "font-stretch", "font-style", "font-synthesis", "font-variant", + "font-variant-alternates", "font-variant-caps", "font-variant-east-asian", + "font-variant-ligatures", "font-variant-numeric", "font-variant-position", + "font-weight", "grid", "grid-area", "grid-auto-columns", "grid-auto-flow", + "grid-auto-rows", "grid-column", "grid-column-end", "grid-column-gap", + "grid-column-start", "grid-gap", "grid-row", "grid-row-end", "grid-row-gap", + "grid-row-start", "grid-template", "grid-template-areas", "grid-template-columns", + "grid-template-rows", "hanging-punctuation", "height", "hyphens", + "icon", "image-orientation", "image-rendering", "image-resolution", + "inline-box-align", "justify-content", "left", "letter-spacing", + "line-break", "line-height", "line-stacking", "line-stacking-ruby", + "line-stacking-shift", "line-stacking-strategy", "list-style", + "list-style-image", "list-style-position", "list-style-type", "margin", + "margin-bottom", "margin-left", "margin-right", "margin-top", + "marks", "marquee-direction", "marquee-loop", + "marquee-play-count", "marquee-speed", "marquee-style", "max-height", + "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index", + "nav-left", "nav-right", "nav-up", "object-fit", "object-position", + "opacity", "order", "orphans", "outline", + "outline-color", "outline-offset", "outline-style", "outline-width", + "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y", + "padding", "padding-bottom", "padding-left", "padding-right", "padding-top", + "page", "page-break-after", "page-break-before", "page-break-inside", + "page-policy", "pause", "pause-after", "pause-before", "perspective", + "perspective-origin", "pitch", "pitch-range", "play-during", "position", + "presentation-level", "punctuation-trim", "quotes", "region-break-after", + "region-break-before", "region-break-inside", "region-fragment", + "rendering-intent", "resize", "rest", "rest-after", "rest-before", "richness", + "right", "rotation", "rotation-point", "ruby-align", "ruby-overhang", + "ruby-position", "ruby-span", "shape-image-threshold", "shape-inside", "shape-margin", + "shape-outside", "size", "speak", "speak-as", "speak-header", + "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set", + "tab-size", "table-layout", "target", "target-name", "target-new", + "target-position", "text-align", "text-align-last", "text-decoration", + "text-decoration-color", "text-decoration-line", "text-decoration-skip", + "text-decoration-style", "text-emphasis", "text-emphasis-color", + "text-emphasis-position", "text-emphasis-style", "text-height", + "text-indent", "text-justify", "text-outline", "text-overflow", "text-shadow", + "text-size-adjust", "text-space-collapse", "text-transform", "text-underline-position", + "text-wrap", "top", "transform", "transform-origin", "transform-style", + "transition", "transition-delay", "transition-duration", + "transition-property", "transition-timing-function", "unicode-bidi", + "user-select", "vertical-align", "visibility", "voice-balance", "voice-duration", + "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress", + "voice-volume", "volume", "white-space", "widows", "width", "word-break", + "word-spacing", "word-wrap", "z-index", + // SVG-specific + "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color", + "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events", + "color-interpolation", "color-interpolation-filters", + "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering", + "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke", + "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", + "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering", + "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal", + "glyph-orientation-vertical", "text-anchor", "writing-mode" + ], propertyKeywords = keySet(propertyKeywords_); + + var nonStandardPropertyKeywords_ = [ + "scrollbar-arrow-color", "scrollbar-base-color", "scrollbar-dark-shadow-color", + "scrollbar-face-color", "scrollbar-highlight-color", "scrollbar-shadow-color", + "scrollbar-3d-light-color", "scrollbar-track-color", "shape-inside", + "searchfield-cancel-button", "searchfield-decoration", "searchfield-results-button", + "searchfield-results-decoration", "zoom" + ], nonStandardPropertyKeywords = keySet(nonStandardPropertyKeywords_); + + var fontProperties_ = [ + "font-family", "src", "unicode-range", "font-variant", "font-feature-settings", + "font-stretch", "font-weight", "font-style" + ], fontProperties = keySet(fontProperties_); + + var counterDescriptors_ = [ + "additive-symbols", "fallback", "negative", "pad", "prefix", "range", + "speak-as", "suffix", "symbols", "system" + ], counterDescriptors = keySet(counterDescriptors_); + + var colorKeywords_ = [ + "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", + "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", + "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", + "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", + "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", + "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", + "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", + "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", + "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", + "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", + "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", + "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", + "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink", + "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", + "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", + "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", + "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", + "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", + "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", + "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", + "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", + "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", + "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", + "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", + "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", + "whitesmoke", "yellow", "yellowgreen" + ], colorKeywords = keySet(colorKeywords_); + + var valueKeywords_ = [ + "above", "absolute", "activeborder", "additive", "activecaption", "afar", + "after-white-space", "ahead", "alias", "all", "all-scroll", "alphabetic", "alternate", + "always", "amharic", "amharic-abegede", "antialiased", "appworkspace", + "arabic-indic", "armenian", "asterisks", "attr", "auto", "avoid", "avoid-column", "avoid-page", + "avoid-region", "background", "backwards", "baseline", "below", "bidi-override", "binary", + "bengali", "blink", "block", "block-axis", "bold", "bolder", "border", "border-box", + "both", "bottom", "break", "break-all", "break-word", "bullets", "button", "button-bevel", + "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "calc", "cambodian", + "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret", + "cell", "center", "checkbox", "circle", "cjk-decimal", "cjk-earthly-branch", + "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote", + "col-resize", "collapse", "color", "color-burn", "color-dodge", "column", "column-reverse", + "compact", "condensed", "contain", "content", + "content-box", "context-menu", "continuous", "copy", "counter", "counters", "cover", "crop", + "cross", "crosshair", "currentcolor", "cursive", "cyclic", "darken", "dashed", "decimal", + "decimal-leading-zero", "default", "default-button", "dense", "destination-atop", + "destination-in", "destination-out", "destination-over", "devanagari", "difference", + "disc", "discard", "disclosure-closed", "disclosure-open", "document", + "dot-dash", "dot-dot-dash", + "dotted", "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out", + "element", "ellipse", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede", + "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er", + "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er", + "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et", + "ethiopic-halehame-gez", "ethiopic-halehame-om-et", + "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et", + "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig", + "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed", + "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "footnotes", + "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove", + "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew", + "help", "hidden", "hide", "higher", "highlight", "highlighttext", + "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "hue", "icon", "ignore", + "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite", + "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis", + "inline-block", "inline-flex", "inline-grid", "inline-table", "inset", "inside", "intrinsic", "invert", + "italic", "japanese-formal", "japanese-informal", "justify", "kannada", + "katakana", "katakana-iroha", "keep-all", "khmer", + "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal", + "landscape", "lao", "large", "larger", "left", "level", "lighter", "lighten", + "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "listitem", + "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian", + "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian", + "lower-roman", "lowercase", "ltr", "luminosity", "malayalam", "match", "matrix", "matrix3d", + "media-controls-background", "media-current-time-display", + "media-fullscreen-button", "media-mute-button", "media-play-button", + "media-return-to-realtime-button", "media-rewind-button", + "media-seek-back-button", "media-seek-forward-button", "media-slider", + "media-sliderthumb", "media-time-remaining-display", "media-volume-slider", + "media-volume-slider-container", "media-volume-sliderthumb", "medium", + "menu", "menulist", "menulist-button", "menulist-text", + "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic", + "mix", "mongolian", "monospace", "move", "multiple", "multiply", "myanmar", "n-resize", + "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop", + "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap", + "ns-resize", "numbers", "numeric", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote", + "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset", + "outside", "outside-shape", "overlay", "overline", "padding", "padding-box", + "painted", "page", "paused", "persian", "perspective", "plus-darker", "plus-lighter", + "pointer", "polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d", + "progress", "push-button", "radial-gradient", "radio", "read-only", + "read-write", "read-write-plaintext-only", "rectangle", "region", + "relative", "repeat", "repeating-linear-gradient", + "repeating-radial-gradient", "repeat-x", "repeat-y", "reset", "reverse", + "rgb", "rgba", "ridge", "right", "rotate", "rotate3d", "rotateX", "rotateY", + "rotateZ", "round", "row", "row-resize", "row-reverse", "rtl", "run-in", "running", + "s-resize", "sans-serif", "saturation", "scale", "scale3d", "scaleX", "scaleY", "scaleZ", "screen", + "scroll", "scrollbar", "se-resize", "searchfield", + "searchfield-cancel-button", "searchfield-decoration", + "searchfield-results-button", "searchfield-results-decoration", + "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama", + "simp-chinese-formal", "simp-chinese-informal", "single", + "skew", "skewX", "skewY", "skip-white-space", "slide", "slider-horizontal", + "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow", + "small", "small-caps", "small-caption", "smaller", "soft-light", "solid", "somali", + "source-atop", "source-in", "source-out", "source-over", "space", "space-around", "space-between", "spell-out", "square", + "square-button", "start", "static", "status-bar", "stretch", "stroke", "sub", + "subpixel-antialiased", "super", "sw-resize", "symbolic", "symbols", "table", + "table-caption", "table-cell", "table-column", "table-column-group", + "table-footer-group", "table-header-group", "table-row", "table-row-group", + "tamil", + "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai", + "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight", + "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er", + "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top", + "trad-chinese-formal", "trad-chinese-informal", + "translate", "translate3d", "translateX", "translateY", "translateZ", + "transparent", "ultra-condensed", "ultra-expanded", "underline", "up", + "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal", + "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url", + "var", "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted", + "visibleStroke", "visual", "w-resize", "wait", "wave", "wider", + "window", "windowframe", "windowtext", "words", "wrap", "wrap-reverse", "x-large", "x-small", "xor", + "xx-large", "xx-small" + ], valueKeywords = keySet(valueKeywords_); + + var allWords = documentTypes_.concat(mediaTypes_).concat(mediaFeatures_).concat(mediaValueKeywords_) + .concat(propertyKeywords_).concat(nonStandardPropertyKeywords_).concat(colorKeywords_) + .concat(valueKeywords_); + CodeMirror.registerHelper("hintWords", "css", allWords); + + function tokenCComment(stream, state) { + var maybeEnd = false, ch; + while ((ch = stream.next()) != null) { + if (maybeEnd && ch == "/") { + state.tokenize = null; + break; + } + maybeEnd = (ch == "*"); + } + return ["comment", "comment"]; + } + + CodeMirror.defineMIME("text/css", { + documentTypes: documentTypes, + mediaTypes: mediaTypes, + mediaFeatures: mediaFeatures, + mediaValueKeywords: mediaValueKeywords, + propertyKeywords: propertyKeywords, + nonStandardPropertyKeywords: nonStandardPropertyKeywords, + fontProperties: fontProperties, + counterDescriptors: counterDescriptors, + colorKeywords: colorKeywords, + valueKeywords: valueKeywords, + tokenHooks: { + "/": function(stream, state) { + if (!stream.eat("*")) return false; + state.tokenize = tokenCComment; + return tokenCComment(stream, state); + } + }, + name: "css" + }); + + CodeMirror.defineMIME("text/x-scss", { + mediaTypes: mediaTypes, + mediaFeatures: mediaFeatures, + mediaValueKeywords: mediaValueKeywords, + propertyKeywords: propertyKeywords, + nonStandardPropertyKeywords: nonStandardPropertyKeywords, + colorKeywords: colorKeywords, + valueKeywords: valueKeywords, + fontProperties: fontProperties, + allowNested: true, + tokenHooks: { + "/": function(stream, state) { + if (stream.eat("/")) { + stream.skipToEnd(); + return ["comment", "comment"]; + } else if (stream.eat("*")) { + state.tokenize = tokenCComment; + return tokenCComment(stream, state); + } else { + return ["operator", "operator"]; + } + }, + ":": function(stream) { + if (stream.match(/\s*\{/)) + return [null, "{"]; + return false; + }, + "$": function(stream) { + stream.match(/^[\w-]+/); + if (stream.match(/^\s*:/, false)) + return ["variable-2", "variable-definition"]; + return ["variable-2", "variable"]; + }, + "#": function(stream) { + if (!stream.eat("{")) return false; + return [null, "interpolation"]; + } + }, + name: "css", + helperType: "scss" + }); + + CodeMirror.defineMIME("text/x-less", { + mediaTypes: mediaTypes, + mediaFeatures: mediaFeatures, + mediaValueKeywords: mediaValueKeywords, + propertyKeywords: propertyKeywords, + nonStandardPropertyKeywords: nonStandardPropertyKeywords, + colorKeywords: colorKeywords, + valueKeywords: valueKeywords, + fontProperties: fontProperties, + allowNested: true, + tokenHooks: { + "/": function(stream, state) { + if (stream.eat("/")) { + stream.skipToEnd(); + return ["comment", "comment"]; + } else if (stream.eat("*")) { + state.tokenize = tokenCComment; + return tokenCComment(stream, state); + } else { + return ["operator", "operator"]; + } + }, + "@": function(stream) { + if (stream.eat("{")) return [null, "interpolation"]; + if (stream.match(/^(charset|document|font-face|import|(-(moz|ms|o|webkit)-)?keyframes|media|namespace|page|supports)\b/, false)) return false; + stream.eatWhile(/[\w\\\-]/); + if (stream.match(/^\s*:/, false)) + return ["variable-2", "variable-definition"]; + return ["variable-2", "variable"]; + }, + "&": function() { + return ["atom", "atom"]; + } + }, + name: "css", + helperType: "less" + }); + + CodeMirror.defineMIME("text/x-gss", { + documentTypes: documentTypes, + mediaTypes: mediaTypes, + mediaFeatures: mediaFeatures, + propertyKeywords: propertyKeywords, + nonStandardPropertyKeywords: nonStandardPropertyKeywords, + fontProperties: fontProperties, + counterDescriptors: counterDescriptors, + colorKeywords: colorKeywords, + valueKeywords: valueKeywords, + supportsAtComponent: true, + tokenHooks: { + "/": function(stream, state) { + if (!stream.eat("*")) return false; + state.tokenize = tokenCComment; + return tokenCComment(stream, state); + } + }, + name: "css", + helperType: "gss" + }); + +}); diff --git a/src/ide.ts b/src/ide.ts index 9091fba01..3583a5f1d 100644 --- a/src/ide.ts +++ b/src/ide.ts @@ -2124,6 +2124,7 @@ export class IDE { } document.getElementById("app-styles").innerHTML = css; + document.getElementsByClassName("CodeMirror")[0].classList.remove("cm-s-default"); this.render(); } diff --git a/src/ide/spans.ts b/src/ide/spans.ts index f3b17a272..b3484ac19 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -620,9 +620,14 @@ export class CodeBlockSpan extends BlockSpan { return this.source.info ? this.source.info.toLowerCase().split(" ")[0] : "eve"; } + syntaxHighlight() : string { + // provide codemirror syntax highlight indications for css blocks only + return this.syntax() === "css" ? "cm-s-default" : ""; + } + apply(from:Position, to:Position, origin = "+input") { this.lineBackgroundClass = "code " + this.syntax(); - this.lineTextClass = "code-text"; + this.lineTextClass = "code-text " + this.syntaxHighlight(); if(this.source.disabled) this.disabled = this.source.disabled; else this.disabled = false; super.apply(from, to, origin); From 7955aced8c839a46e1c9f771cf43bd55252140ac Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 00:39:46 +0000 Subject: [PATCH 06/16] switch css blocks from yellow to blue --- css/ide.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/ide.css b/css/ide.css index e3cd6d239..aaeffb55a 100644 --- a/css/ide.css +++ b/css/ide.css @@ -120,7 +120,7 @@ body { justify-content: stretch; } .CodeMirror .STRONG { font-weight:bold; } .CodeMirror .EMPH { font-style:italic; } .CodeMirror .CODE { margin-left: 10px; margin-right:50px; border-left:5px solid #eaeaea; background: #f4f4f4; font-family: "Inconsolata", "Monaco", "Consolas", "Ubuntu Mono", monospace; } -.CodeMirror .CODE.css { background: #fff7e9; border-left-color: #ffedcc;} +.CodeMirror .CODE.css { background: #f0f5ff; border-left-color: #e1ebff;} .CodeMirror .CODE-TEXT { line-height:19px; padding-left:30px; transition: opacity 0.3s; } .CodeMirror .CODE-TEXT.CODE-DISABLED { opacity: 0.6; } .CodeMirror span.CODE { color: #0076ce; background:none; margin:0; padding:0; border:none; } From e8c99bc297fb5d734a88c18557e5710b21af6abc Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 01:00:23 +0000 Subject: [PATCH 07/16] selector rewrite to limit scope of example's css --- src/runtime/runtimeClient.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index b6d3ed640..4cd604ca6 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -134,9 +134,12 @@ export abstract class RuntimeClient { error.injectSpan(spans, extraInfo); } var css = ""; - this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks + this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)\n(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks css += g1; }); + css = css.split("\n").map(function(line) { + return ".application-container > .program " + line; + }).join("\n"); this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css})); } else if(data.type === "eval") { if(this.evaluation !== undefined && data.persist) { From ed5c0cc586abcbdab573c873eac647578726e9e8 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 01:26:02 +0000 Subject: [PATCH 08/16] fix bug for empty extracted css blocks --- src/runtime/runtimeClient.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index 4cd604ca6..0b6ab70c4 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -137,9 +137,9 @@ export abstract class RuntimeClient { this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)\n(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks css += g1; }); - css = css.split("\n").map(function(line) { + css = css ? css.split("\n").map(function(line) { return ".application-container > .program " + line; - }).join("\n"); + }).join("\n") : ""; this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css})); } else if(data.type === "eval") { if(this.evaluation !== undefined && data.persist) { From ee62762735c10c91f61c2c0df39ecfcdd815de2d Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 16:39:24 +0000 Subject: [PATCH 09/16] mark non-eve blocks with language name --- css/ide.css | 7 ++++--- src/ide/spans.ts | 8 ++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/css/ide.css b/css/ide.css index aaeffb55a..77af00078 100644 --- a/css/ide.css +++ b/css/ide.css @@ -130,9 +130,10 @@ body { justify-content: stretch; } .CodeMirror .CODE-BOTTOM { border-radius:0 0 3px 3px; padding-bottom:8px; } .CodeMirror .CodeMirror-linewidget { overflow: visible; z-index: 3; } -.CodeMirror .code-controls-widget { display: flex; flex-direction: row; justify-content: flex-end; margin-right: 50px; padding: 5px 10px; padding-bottom: 0; height: 15px; font-size: 1.2rem; opacity: 0.2; transition: opacity 0.3s; } -.CodeMirror .code-controls-widget > * { cursor:pointer; } -.CodeMirror .CodeMirror-linewidget:hover .code-controls-widget { opacity: 1; } +.CodeMirror .code-controls-widget { display: flex; flex-direction: row; justify-content: flex-end; margin-right: 50px; padding: 3px 5px; padding-bottom: 0; height: 20px; font-size: 1.2rem; transition: opacity 0.3s; } +.CodeMirror .code-controls-widget .enable-btn { cursor:pointer; opacity: 0.2; } +.CodeMirror .CodeMirror-linewidget .code-controls-widget .enable-btn:hover { opacity: 1; } +.CodeMirror .CodeMirror-linewidget .code-controls-widget .code-language-label {font-size: 1.0rem; margin-top: -2px; margin-right: 5px; opacity: 0.5;} .CodeMirror .code-footer-widget { height: 15px; } diff --git a/src/ide/spans.ts b/src/ide/spans.ts index b3484ac19..9df9ee22c 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -610,6 +610,7 @@ export class CodeBlockSpan extends BlockSpan { protected widgetLine:number; protected widget:CodeMirror.LineWidget; protected widgetElem:HTMLElement; + protected languageLabelElem:HTMLElement; protected enableToggleElem:HTMLElement; protected footerWidgetLine:number; @@ -694,6 +695,13 @@ export class CodeBlockSpan extends BlockSpan { this.widgetElem = document.createElement("div"); this.widgetElem.className = "code-controls-widget"; + if (this.syntax() !== "eve") { + this.languageLabelElem = document.createElement("div"); + this.languageLabelElem.className = "code-language-label"; + this.languageLabelElem.textContent = this.syntax().toUpperCase(); + this.widgetElem.appendChild(this.languageLabelElem); + } + this.enableToggleElem = document.createElement("div"); this.enableToggleElem.classList.add("enable-btn"); this.enableToggleElem.onclick = () => { From 947332687c6f5d68f0567cd2c967c1d4b15619de Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 4 Dec 2016 16:48:06 +0000 Subject: [PATCH 10/16] tweak checkbox position and restore fixed length block-insertion bar to fix transition --- css/ide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/ide.css b/css/ide.css index 77af00078..c5a06b315 100644 --- a/css/ide.css +++ b/css/ide.css @@ -130,7 +130,7 @@ body { justify-content: stretch; } .CodeMirror .CODE-BOTTOM { border-radius:0 0 3px 3px; padding-bottom:8px; } .CodeMirror .CodeMirror-linewidget { overflow: visible; z-index: 3; } -.CodeMirror .code-controls-widget { display: flex; flex-direction: row; justify-content: flex-end; margin-right: 50px; padding: 3px 5px; padding-bottom: 0; height: 20px; font-size: 1.2rem; transition: opacity 0.3s; } +.CodeMirror .code-controls-widget { display: flex; flex-direction: row; justify-content: flex-end; margin-right: 50px; padding: 3px 6px; padding-bottom: 0; height: 20px; font-size: 1.2rem; transition: opacity 0.3s; } .CodeMirror .code-controls-widget .enable-btn { cursor:pointer; opacity: 0.2; } .CodeMirror .CodeMirror-linewidget .code-controls-widget .enable-btn:hover { opacity: 1; } .CodeMirror .CodeMirror-linewidget .code-controls-widget .code-language-label {font-size: 1.0rem; margin-top: -2px; margin-right: 5px; opacity: 0.5;} @@ -179,7 +179,7 @@ body { justify-content: stretch; } * Format Bars \****************************************************************************/ .editor-pane .new-block-bar { position: absolute; top: 0; left: 0; margin-left: -28px; display: flex; flex-direction: row; width: 28px; overflow: hidden; transition: width 0.15s; z-index: 5; color: #666; border-radius:5px; border:1px solid #ddd; font-size:10pt; background:white; } -.editor-pane .new-block-bar.active { width: initial; } +.editor-pane .new-block-bar.active { width: 267px; } .editor-pane .new-block-bar > .new-block-bar-toggle, From 43e1959eefcc6313e06f74d41e334e9250303911 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 10 Dec 2016 14:46:36 +0000 Subject: [PATCH 11/16] reapply merge conflict --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b43068f83..a9a4d0ae9 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - + From b8b212c780dd8e8389073ce1bf5c9d49b63b39a5 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 10 Dec 2016 15:05:20 +0000 Subject: [PATCH 12/16] correct merge --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a9a4d0ae9..de38f3f4b 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - + From b164c9952b1ab5dda3daeda738e2e35d3be0d562 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 10 Dec 2016 15:23:05 +0000 Subject: [PATCH 13/16] support multiline css blocks and comma-separated selector specifications --- src/runtime/runtimeClient.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index 0b6ab70c4..9ae25d9c3 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -137,9 +137,11 @@ export abstract class RuntimeClient { this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)\n(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks css += g1; }); - css = css ? css.split("\n").map(function(line) { - return ".application-container > .program " + line; - }).join("\n") : ""; + css = css ? css.split("}").slice(0, -1).map(function(block) { + return block.split(",").map(function(selector) { + return ".application-container > .program " + selector.trim(); + }).join(", "); + }).join("}\n") + "}" : ""; this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css})); } else if(data.type === "eval") { if(this.evaluation !== undefined && data.persist) { From ee9ab9e416742e1f9f34c96ee78b6c35b9880c98 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 10 Dec 2016 17:05:33 +0000 Subject: [PATCH 14/16] comments for multlanguage styling + support css rewriting for multiline css blocks + keyframes + media queries --- src/ide.ts | 2 +- src/ide/spans.ts | 1 + src/runtime/runtimeClient.ts | 34 ++++++++++++++++++++++++---------- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/ide.ts b/src/ide.ts index 5d1aee625..9ab3fe088 100644 --- a/src/ide.ts +++ b/src/ide.ts @@ -2132,7 +2132,7 @@ export class IDE { } document.getElementById("app-styles").innerHTML = css; - document.getElementsByClassName("CodeMirror")[0].classList.remove("cm-s-default"); + document.getElementsByClassName("CodeMirror")[0].classList.remove("cm-s-default"); // remove document wide code-styling this.render(); } diff --git a/src/ide/spans.ts b/src/ide/spans.ts index 9df9ee22c..27d1d893b 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -621,6 +621,7 @@ export class CodeBlockSpan extends BlockSpan { return this.source.info ? this.source.info.toLowerCase().split(" ")[0] : "eve"; } + // @TODO: replace with style-by-block when multi-language styling can be integrated syntaxHighlight() : string { // provide codemirror syntax highlight indications for css blocks only return this.syntax() === "css" ? "cm-s-default" : ""; diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index 9ae25d9c3..d0637bbc7 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -95,6 +95,29 @@ export abstract class RuntimeClient { return true; } + enabledCss() { + var css = ""; + this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)\n(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks + css += g1; + }); + + // remove whitespace before open braces, and add a newline after open brace + css = css.replace(/\s*{\s*/g, " {\n"); + + css = css.split("\n").map(function(line) { + var trimmedLine = line.trim(); + if ((line.indexOf("{") !== -1) && (trimmedLine[0] !== "@") && (["from", "to"].indexOf(trimmedLine.split(" ")[0]) === -1)) { + return trimmedLine.split(",").map(function(section) { + return ".application-container > .program " + section; + }).join(", "); + } + + return trimmedLine; + }).join("\n"); + + return css; + } + handleEvent(json:string) { let data = JSON.parse(json); @@ -133,16 +156,7 @@ export abstract class RuntimeClient { for(let error of buildErrors) { error.injectSpan(spans, extraInfo); } - var css = ""; - this.lastParse.code.replace(/(?:```|~~~)css\n([\w\W]*?)\n(?:```|~~~)/g, (g0, g1) => { // \n excludes disabled blocks - css += g1; - }); - css = css ? css.split("}").slice(0, -1).map(function(block) { - return block.split(",").map(function(selector) { - return ".application-container > .program " + selector.trim(); - }).join(", "); - }).join("}\n") + "}" : ""; - this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css})); + this.send(JSON.stringify({type: "parse", generation: data.generation, text, spans, extraInfo, css: this.enabledCss()})); } else if(data.type === "eval") { if(this.evaluation !== undefined && data.persist) { let changes = this.evaluation.createChanges(); From bb5669ef1fcee0e5535d82609ffe9896413ccb4a Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sat, 10 Dec 2016 17:14:43 +0000 Subject: [PATCH 15/16] exclude media queries, animations and associated fields --- src/runtime/runtimeClient.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/runtime/runtimeClient.ts b/src/runtime/runtimeClient.ts index d0637bbc7..9c6e51955 100644 --- a/src/runtime/runtimeClient.ts +++ b/src/runtime/runtimeClient.ts @@ -106,7 +106,9 @@ export abstract class RuntimeClient { css = css.split("\n").map(function(line) { var trimmedLine = line.trim(); - if ((line.indexOf("{") !== -1) && (trimmedLine[0] !== "@") && (["from", "to"].indexOf(trimmedLine.split(" ")[0]) === -1)) { + if ((line.indexOf("{") !== -1) && // selector line + ("0123456789@".indexOf(trimmedLine[0]) === -1) && // no animation percentages or @-rules + (["from", "to"].indexOf(trimmedLine.split(" ")[0]) === -1)) { // exclude animation instructions return trimmedLine.split(",").map(function(section) { return ".application-container > .program " + section; }).join(", "); From 95fef05964a9cf80b5d1bf5d5691fc9d8562d6c8 Mon Sep 17 00:00:00 2001 From: Darryl Morris Date: Sun, 11 Dec 2016 12:47:01 +0000 Subject: [PATCH 16/16] apply fix to prevent crash in clearWidgets() --- src/ide/spans.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ide/spans.ts b/src/ide/spans.ts index 27d1d893b..82ae96f07 100644 --- a/src/ide/spans.ts +++ b/src/ide/spans.ts @@ -720,6 +720,7 @@ export class CodeBlockSpan extends BlockSpan { } clearWidgets() { + if(!this.widget) return; this.widget.clear(); this.footerWidget.clear(); this.widget = this.widgetElem = this.widgetLine = undefined;