diff options
Diffstat (limited to 'examples/webenginewidgets/recipebrowser')
35 files changed, 3429 insertions, 0 deletions
diff --git a/examples/webenginewidgets/recipebrowser/CMakeLists.txt b/examples/webenginewidgets/recipebrowser/CMakeLists.txt new file mode 100644 index 000000000..d10409c09 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/CMakeLists.txt @@ -0,0 +1,71 @@ +# Copyright (C) 2023 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + +cmake_minimum_required(VERSION 3.16) +project(recipebrowser LANGUAGES CXX) + +set(CMAKE_AUTOMOC ON) +set(CMAKE_AUTOUIC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/recipebrowser") + +find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineWidgets) + +qt_add_executable(recipebrowser + main.cpp + mainwindow.cpp mainwindow.h mainwindow.ui + stylesheetdialog.cpp stylesheetdialog.h stylesheetdialog.ui + document.cpp document.h +) + +set_target_properties(recipebrowser PROPERTIES + WIN32_EXECUTABLE TRUE + MACOSX_BUNDLE TRUE +) + +target_link_libraries(recipebrowser PUBLIC + Qt::Core + Qt::Gui + Qt::WebEngineWidgets +) + +# Resources: +set(recipebrowser_resource_files + "assets/3rdparty/markdown.css" + "assets/3rdparty/marked.js" + "assets/custom.css" + "assets/custom.js" + "assets/pages/burger.html" + "assets/pages/cupcakes.html" + "assets/pages/images/burger.jpg" + "assets/pages/images/cupcakes.jpg" + "assets/pages/images/pasta.jpg" + "assets/pages/images/pizza.jpg" + "assets/pages/images/skewers.jpg" + "assets/pages/images/soup.jpg" + "assets/pages/images/steak.jpg" + "assets/pages/pasta.html" + "assets/pages/pizza.html" + "assets/pages/skewers.html" + "assets/pages/soup.html" + "assets/pages/steak.html" +) + +qt_add_resources(recipebrowser "recipebrowser" + PREFIX + "/" + BASE + "assets" + FILES + ${recipebrowser_resource_files} +) + +install(TARGETS recipebrowser + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKDOWN-LICENSE.txt b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKDOWN-LICENSE.txt new file mode 100644 index 000000000..23c52cc43 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKDOWN-LICENSE.txt @@ -0,0 +1,16 @@ +Copyright 2011 Kevin Burke unless otherwise noted. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +Some content is copyrighted by Twitter, Inc., and also released under an +Apache License; these sections are noted in the source. diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKED-LICENSE.txt b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKED-LICENSE.txt new file mode 100644 index 000000000..8e3ba0e0a --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKED-LICENSE.txt @@ -0,0 +1,19 @@ +Copyright (c) 2011-2018, Christopher Jeffrey (https://github.com/chjj/) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/markdown.css b/examples/webenginewidgets/recipebrowser/assets/3rdparty/markdown.css new file mode 100644 index 000000000..24fc2ffe2 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/markdown.css @@ -0,0 +1,260 @@ +body{ + margin: 0 auto; + font-family: Georgia, Palatino, serif; + color: #444444; + line-height: 1; + max-width: 960px; + padding: 30px; +} +h1, h2, h3, h4 { + color: #111111; + font-weight: 400; +} +h1, h2, h3, h4, h5, p { + margin-bottom: 24px; + padding: 0; +} +h1 { + font-size: 48px; +} +h2 { + font-size: 36px; + /* The bottom margin is small. It's designed to be used with gray meta text + * below a post title. */ + margin: 24px 0 6px; +} +h3 { + font-size: 24px; +} +h4 { + font-size: 21px; +} +h5 { + font-size: 18px; +} +a { + color: #0099ff; + margin: 0; + padding: 0; + vertical-align: baseline; +} +a:hover { + text-decoration: none; + color: #ff6600; +} +a:visited { + color: purple; +} +ul, ol { + padding: 0; + margin: 0; +} +li { + line-height: 24px; +} +li ul, li ul { + margin-left: 24px; +} +p, ul, ol { + font-size: 16px; + line-height: 24px; + max-width: 540px; +} +pre { + padding: 0px 24px; + max-width: 800px; + white-space: pre-wrap; +} +code { + font-family: Consolas, Monaco, Andale Mono, monospace; + line-height: 1.5; + font-size: 13px; +} +aside { + display: block; + float: right; + width: 390px; +} +blockquote { + border-left:.5em solid #eee; + padding: 0 2em; + margin-left:0; + max-width: 476px; +} +blockquote cite { + font-size:14px; + line-height:20px; + color:#bfbfbf; +} +blockquote cite:before { + content: '\2014 \00A0'; +} + +blockquote p { + color: #666; + max-width: 460px; +} +hr { + width: 540px; + text-align: left; + margin: 0 auto 0 0; + color: #999; +} + +/* Code below this line is copyright Twitter Inc. */ + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; + *overflow: visible; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; +} +/* override default chrome & firefox settings */ +input:not([type="image"]), textarea { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: normal; + margin-bottom: 18px; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; + margin-bottom: 0; +} +input[type=text], +input[type=password], +textarea, +select { + display: inline-block; + width: 210px; + padding: 4px; + font-size: 13px; + font-weight: normal; + line-height: 18px; + height: 18px; + color: #808080; + border: 1px solid #ccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +select, input[type=file] { + height: 27px; + line-height: 27px; +} +textarea { + height: auto; +} + +/* grey out placeholders */ +:-moz-placeholder { + color: #bfbfbf; +} +::-webkit-input-placeholder { + color: #bfbfbf; +} + +input[type=text], +input[type=password], +select, +textarea { + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} +input[type=text]:focus, input[type=password]:focus, textarea:focus { + outline: none; + border-color: rgba(82, 168, 236, 0.8); + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +} + +/* buttons */ +button { + display: inline-block; + padding: 4px 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border: 1px solid #004b9a; + border-bottom-color: #003f81; + -webkit-transition: 0.1s linear all; + -moz-transition: 0.1s linear all; + transition: 0.1s linear all; + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +button:hover { + color: #fff; + background-position: 0 -15px; + text-decoration: none; +} +button:active { + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/marked.js b/examples/webenginewidgets/recipebrowser/assets/3rdparty/marked.js new file mode 100644 index 000000000..33c02d9cf --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/marked.js @@ -0,0 +1,1514 @@ +/** + * marked - a markdown parser + * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed) + * https://github.com/markedjs/marked + */ + +;(function(root) { +'use strict'; + +/** + * Block-Level Grammar + */ + +var block = { + newline: /^\n+/, + code: /^( {4}[^\n]+\n*)+/, + fences: noop, + hr: /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/, + heading: /^ *(#{1,6}) *([^\n]+?) *(?:#+ *)?(?:\n+|$)/, + nptable: noop, + blockquote: /^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/, + list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/, + html: '^ {0,3}(?:' // optional indentation + + '<(script|pre|style)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)' // (1) + + '|comment[^\\n]*(\\n+|$)' // (2) + + '|<\\?[\\s\\S]*?\\?>\\n*' // (3) + + '|<![A-Z][\\s\\S]*?>\\n*' // (4) + + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>\\n*' // (5) + + '|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:\\n{2,}|$)' // (6) + + '|<(?!script|pre|style)([a-z][\\w-]*)(?:attribute)*? */?>(?=\\h*\\n)[\\s\\S]*?(?:\\n{2,}|$)' // (7) open tag + + '|</(?!script|pre|style)[a-z][\\w-]*\\s*>(?=\\h*\\n)[\\s\\S]*?(?:\\n{2,}|$)' // (7) closing tag + + ')', + def: /^ {0,3}\[(label)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)(title))? *(?:\n+|$)/, + table: noop, + lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/, + paragraph: /^([^\n]+(?:\n(?!hr|heading|lheading| {0,3}>|<\/?(?:tag)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)/, + text: /^[^\n]+/ +}; + +block._label = /(?!\s*\])(?:\\[\[\]]|[^\[\]])+/; +block._title = /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/; +block.def = edit(block.def) + .replace('label', block._label) + .replace('title', block._title) + .getRegex(); + +block.bullet = /(?:[*+-]|\d+\.)/; +block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/; +block.item = edit(block.item, 'gm') + .replace(/bull/g, block.bullet) + .getRegex(); + +block.list = edit(block.list) + .replace(/bull/g, block.bullet) + .replace('hr', '\\n+(?=\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$))') + .replace('def', '\\n+(?=' + block.def.source + ')') + .getRegex(); + +block._tag = 'address|article|aside|base|basefont|blockquote|body|caption' + + '|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption' + + '|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe' + + '|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option' + + '|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr' + + '|track|ul'; +block._comment = /<!--(?!-?>)[\s\S]*?-->/; +block.html = edit(block.html, 'i') + .replace('comment', block._comment) + .replace('tag', block._tag) + .replace('attribute', / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/) + .getRegex(); + +block.paragraph = edit(block.paragraph) + .replace('hr', block.hr) + .replace('heading', block.heading) + .replace('lheading', block.lheading) + .replace('tag', block._tag) // pars can be interrupted by type (6) html blocks + .getRegex(); + +block.blockquote = edit(block.blockquote) + .replace('paragraph', block.paragraph) + .getRegex(); + +/** + * Normal Block Grammar + */ + +block.normal = merge({}, block); + +/** + * GFM Block Grammar + */ + +block.gfm = merge({}, block.normal, { + fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\n? *\1 *(?:\n+|$)/, + paragraph: /^/, + heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/ +}); + +block.gfm.paragraph = edit(block.paragraph) + .replace('(?!', '(?!' + + block.gfm.fences.source.replace('\\1', '\\2') + '|' + + block.list.source.replace('\\1', '\\3') + '|') + .getRegex(); + +/** + * GFM + Tables Block Grammar + */ + +block.tables = merge({}, block.gfm, { + nptable: /^ *([^|\n ].*\|.*)\n *([-:]+ *\|[-| :]*)(?:\n((?:.*[^>\n ].*(?:\n|$))*)\n*|$)/, + table: /^ *\|(.+)\n *\|?( *[-:]+[-| :]*)(?:\n((?: *[^>\n ].*(?:\n|$))*)\n*|$)/ +}); + +/** + * Pedantic grammar + */ + +block.pedantic = merge({}, block.normal, { + html: edit( + '^ *(?:comment *(?:\\n|\\s*$)' + + '|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)' // closed tag + + '|<tag(?:"[^"]*"|\'[^\']*\'|\\s[^\'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))') + .replace('comment', block._comment) + .replace(/tag/g, '(?!(?:' + + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub' + + '|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)' + + '\\b)\\w+(?!:|[^\\w\\s@]*@)\\b') + .getRegex(), + def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/ +}); + +/** + * Block Lexer + */ + +function Lexer(options) { + this.tokens = []; + this.tokens.links = {}; + this.options = options || marked.defaults; + this.rules = block.normal; + + if (this.options.pedantic) { + this.rules = block.pedantic; + } else if (this.options.gfm) { + if (this.options.tables) { + this.rules = block.tables; + } else { + this.rules = block.gfm; + } + } +} + +/** + * Expose Block Rules + */ + +Lexer.rules = block; + +/** + * Static Lex Method + */ + +Lexer.lex = function(src, options) { + var lexer = new Lexer(options); + return lexer.lex(src); +}; + +/** + * Preprocessing + */ + +Lexer.prototype.lex = function(src) { + src = src + .replace(/\r\n|\r/g, '\n') + .replace(/\t/g, ' ') + .replace(/\u00a0/g, ' ') + .replace(/\u2424/g, '\n'); + + return this.token(src, true); +}; + +/** + * Lexing + */ + +Lexer.prototype.token = function(src, top) { + src = src.replace(/^ +$/gm, ''); + var next, + loose, + cap, + bull, + b, + item, + space, + i, + tag, + l, + isordered, + istask, + ischecked; + + while (src) { + // newline + if (cap = this.rules.newline.exec(src)) { + src = src.substring(cap[0].length); + if (cap[0].length > 1) { + this.tokens.push({ + type: 'space' + }); + } + } + + // code + if (cap = this.rules.code.exec(src)) { + src = src.substring(cap[0].length); + cap = cap[0].replace(/^ {4}/gm, ''); + this.tokens.push({ + type: 'code', + text: !this.options.pedantic + ? cap.replace(/\n+$/, '') + : cap + }); + continue; + } + + // fences (gfm) + if (cap = this.rules.fences.exec(src)) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'code', + lang: cap[2], + text: cap[3] || '' + }); + continue; + } + + // heading + if (cap = this.rules.heading.exec(src)) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'heading', + depth: cap[1].length, + text: cap[2] + }); + continue; + } + + // table no leading pipe (gfm) + if (top && (cap = this.rules.nptable.exec(src))) { + item = { + type: 'table', + header: splitCells(cap[1].replace(/^ *| *\| *$/g, '')), + align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */), + cells: cap[3] ? cap[3].replace(/\n$/, '').split('\n') : [] + }; + + if (item.header.length === item.align.length) { + src = src.substring(cap[0].length); + + for (i = 0; i < item.align.length; i++) { + if (/^ *-+: *$/.test(item.align[i])) { + item.align[i] = 'right'; + } else if (/^ *:-+: *$/.test(item.align[i])) { + item.align[i] = 'center'; + } else if (/^ *:-+ *$/.test(item.align[i])) { + item.align[i] = 'left'; + } else { + item.align[i] = null; + } + } + + for (i = 0; i < item.cells.length; i++) { + item.cells[i] = splitCells(item.cells[i], item.header.length); + } + + this.tokens.push(item); + + continue; + } + } + + // hr + if (cap = this.rules.hr.exec(src)) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'hr' + }); + continue; + } + + // blockquote + if (cap = this.rules.blockquote.exec(src)) { + src = src.substring(cap[0].length); + + this.tokens.push({ + type: 'blockquote_start' + }); + + cap = cap[0].replace(/^ *> ?/gm, ''); + + // Pass `top` to keep the current + // "toplevel" state. This is exactly + // how markdown.pl works. + this.token(cap, top); + + this.tokens.push({ + type: 'blockquote_end' + }); + + continue; + } + + // list + if (cap = this.rules.list.exec(src)) { + src = src.substring(cap[0].length); + bull = cap[2]; + isordered = bull.length > 1; + + this.tokens.push({ + type: 'list_start', + ordered: isordered, + start: isordered ? +bull : '' + }); + + // Get each top-level item. + cap = cap[0].match(this.rules.item); + + next = false; + l = cap.length; + i = 0; + + for (; i < l; i++) { + item = cap[i]; + + // Remove the list item's bullet + // so it is seen as the next token. + space = item.length; + item = item.replace(/^ *([*+-]|\d+\.) +/, ''); + + // Outdent whatever the + // list item contains. Hacky. + if (~item.indexOf('\n ')) { + space -= item.length; + item = !this.options.pedantic + ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '') + : item.replace(/^ {1,4}/gm, ''); + } + + // Determine whether the next list item belongs here. + // Backpedal if it does not belong in this list. + if (this.options.smartLists && i !== l - 1) { + b = block.bullet.exec(cap[i + 1])[0]; + if (bull !== b && !(bull.length > 1 && b.length > 1)) { + src = cap.slice(i + 1).join('\n') + src; + i = l - 1; + } + } + + // Determine whether item is loose or not. + // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/ + // for discount behavior. + loose = next || /\n\n(?!\s*$)/.test(item); + if (i !== l - 1) { + next = item.charAt(item.length - 1) === '\n'; + if (!loose) loose = next; + } + + // Check for task list items + istask = /^\[[ xX]\] /.test(item); + ischecked = undefined; + if (istask) { + ischecked = item[1] !== ' '; + item = item.replace(/^\[[ xX]\] +/, ''); + } + + this.tokens.push({ + type: loose + ? 'loose_item_start' + : 'list_item_start', + task: istask, + checked: ischecked + }); + + // Recurse. + this.token(item, false); + + this.tokens.push({ + type: 'list_item_end' + }); + } + + this.tokens.push({ + type: 'list_end' + }); + + continue; + } + + // html + if (cap = this.rules.html.exec(src)) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: this.options.sanitize + ? 'paragraph' + : 'html', + pre: !this.options.sanitizer + && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'), + text: cap[0] + }); + continue; + } + + // def + if (top && (cap = this.rules.def.exec(src))) { + src = src.substring(cap[0].length); + if (cap[3]) cap[3] = cap[3].substring(1, cap[3].length - 1); + tag = cap[1].toLowerCase().replace(/\s+/g, ' '); + if (!this.tokens.links[tag]) { + this.tokens.links[tag] = { + href: cap[2], + title: cap[3] + }; + } + continue; + } + + // table (gfm) + if (top && (cap = this.rules.table.exec(src))) { + item = { + type: 'table', + header: splitCells(cap[1].replace(/^ *| *\| *$/g, '')), + align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */), + cells: cap[3] ? cap[3].replace(/(?: *\| *)?\n$/, '').split('\n') : [] + }; + + if (item.header.length === item.align.length) { + src = src.substring(cap[0].length); + + for (i = 0; i < item.align.length; i++) { + if (/^ *-+: *$/.test(item.align[i])) { + item.align[i] = 'right'; + } else if (/^ *:-+: *$/.test(item.align[i])) { + item.align[i] = 'center'; + } else if (/^ *:-+ *$/.test(item.align[i])) { + item.align[i] = 'left'; + } else { + item.align[i] = null; + } + } + + for (i = 0; i < item.cells.length; i++) { + item.cells[i] = splitCells( + item.cells[i].replace(/^ *\| *| *\| *$/g, ''), + item.header.length); + } + + this.tokens.push(item); + + continue; + } + } + + // lheading + if (cap = this.rules.lheading.exec(src)) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'heading', + depth: cap[2] === '=' ? 1 : 2, + text: cap[1] + }); + continue; + } + + // top-level paragraph + if (top && (cap = this.rules.paragraph.exec(src))) { + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'paragraph', + text: cap[1].charAt(cap[1].length - 1) === '\n' + ? cap[1].slice(0, -1) + : cap[1] + }); + continue; + } + + // text + if (cap = this.rules.text.exec(src)) { + // Top-level should never reach here. + src = src.substring(cap[0].length); + this.tokens.push({ + type: 'text', + text: cap[0] + }); + continue; + } + + if (src) { + throw new Error('Infinite loop on byte: ' + src.charCodeAt(0)); + } + } + + return this.tokens; +}; + +/** + * Inline-Level Grammar + */ + +var inline = { + escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/, + autolink: /^<(scheme:[^\s\x00-\x1f<>]*|email)>/, + url: noop, + tag: '^comment' + + '|^</[a-zA-Z][\\w:-]*\\s*>' // self-closing tag + + '|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>' // open tag + + '|^<\\?[\\s\\S]*?\\?>' // processing instruction, e.g. <?php ?> + + '|^<![a-zA-Z]+\\s[\\s\\S]*?>' // declaration, e.g. <!DOCTYPE html> + + '|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>', // CDATA section + link: /^!?\[(label)\]\(href(?:\s+(title))?\s*\)/, + reflink: /^!?\[(label)\]\[(?!\s*\])((?:\\[\[\]]?|[^\[\]\\])+)\]/, + nolink: /^!?\[(?!\s*\])((?:\[[^\[\]]*\]|\\[\[\]]|[^\[\]])*)\](?:\[\])?/, + strong: /^__([^\s][\s\S]*?[^\s])__(?!_)|^\*\*([^\s][\s\S]*?[^\s])\*\*(?!\*)|^__([^\s])__(?!_)|^\*\*([^\s])\*\*(?!\*)/, + em: /^_([^\s][\s\S]*?[^\s_])_(?!_)|^_([^\s_][\s\S]*?[^\s])_(?!_)|^\*([^\s][\s\S]*?[^\s*])\*(?!\*)|^\*([^\s*][\s\S]*?[^\s])\*(?!\*)|^_([^\s_])_(?!_)|^\*([^\s*])\*(?!\*)/, + code: /^(`+)\s*([\s\S]*?[^`]?)\s*\1(?!`)/, + br: /^ {2,}\n(?!\s*$)/, + del: noop, + text: /^[\s\S]+?(?=[\\<!\[`*]|\b_| {2,}\n|$)/ +}; + +inline._escapes = /\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g; + +inline._scheme = /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/; +inline._email = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/; +inline.autolink = edit(inline.autolink) + .replace('scheme', inline._scheme) + .replace('email', inline._email) + .getRegex(); + +inline._attribute = /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/; + +inline.tag = edit(inline.tag) + .replace('comment', block._comment) + .replace('attribute', inline._attribute) + .getRegex(); + +inline._label = /(?:\[[^\[\]]*\]|\\[\[\]]?|`[^`]*`|[^\[\]\\])*?/; +inline._href = /\s*(<(?:\\[<>]?|[^\s<>\\])*>|(?:\\[()]?|\([^\s\x00-\x1f()\\]*\)|[^\s\x00-\x1f()\\])*?)/; +inline._title = /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/; + +inline.link = edit(inline.link) + .replace('label', inline._label) + .replace('href', inline._href) + .replace('title', inline._title) + .getRegex(); + +inline.reflink = edit(inline.reflink) + .replace('label', inline._label) + .getRegex(); + +/** + * Normal Inline Grammar + */ + +inline.normal = merge({}, inline); + +/** + * Pedantic Inline Grammar + */ + +inline.pedantic = merge({}, inline.normal, { + strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/, + em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/, + link: edit(/^!?\[(label)\]\((.*?)\)/) + .replace('label', inline._label) + .getRegex(), + reflink: edit(/^!?\[(label)\]\s*\[([^\]]*)\]/) + .replace('label', inline._label) + .getRegex() +}); + +/** + * GFM Inline Grammar + */ + +inline.gfm = merge({}, inline.normal, { + escape: edit(inline.escape).replace('])', '~|])').getRegex(), + url: edit(/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/) + .replace('email', inline._email) + .getRegex(), + _backpedal: /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/, + del: /^~~(?=\S)([\s\S]*?\S)~~/, + text: edit(inline.text) + .replace(']|', '~]|') + .replace('|', '|https?://|ftp://|www\\.|[a-zA-Z0-9.!#$%&\'*+/=?^_`{\\|}~-]+@|') + .getRegex() +}); + +/** + * GFM + Line Breaks Inline Grammar + */ + +inline.breaks = merge({}, inline.gfm, { + br: edit(inline.br).replace('{2,}', '*').getRegex(), + text: edit(inline.gfm.text).replace('{2,}', '*').getRegex() +}); + +/** + * Inline Lexer & Compiler + */ + +function InlineLexer(links, options) { + this.options = options || marked.defaults; + this.links = links; + this.rules = inline.normal; + this.renderer = this.options.renderer || new Renderer(); + this.renderer.options = this.options; + + if (!this.links) { + throw new Error('Tokens array requires a `links` property.'); + } + + if (this.options.pedantic) { + this.rules = inline.pedantic; + } else if (this.options.gfm) { + if (this.options.breaks) { + this.rules = inline.breaks; + } else { + this.rules = inline.gfm; + } + } +} + +/** + * Expose Inline Rules + */ + +InlineLexer.rules = inline; + +/** + * Static Lexing/Compiling Method + */ + +InlineLexer.output = function(src, links, options) { + var inline = new InlineLexer(links, options); + return inline.output(src); +}; + +/** + * Lexing/Compiling + */ + +InlineLexer.prototype.output = function(src) { + var out = '', + link, + text, + href, + title, + cap; + + while (src) { + // escape + if (cap = this.rules.escape.exec(src)) { + src = src.substring(cap[0].length); + out += cap[1]; + continue; + } + + // autolink + if (cap = this.rules.autolink.exec(src)) { + src = src.substring(cap[0].length); + if (cap[2] === '@') { + text = escape(this.mangle(cap[1])); + href = 'mailto:' + text; + } else { + text = escape(cap[1]); + href = text; + } + out += this.renderer.link(href, null, text); + continue; + } + + // url (gfm) + if (!this.inLink && (cap = this.rules.url.exec(src))) { + cap[0] = this.rules._backpedal.exec(cap[0])[0]; + src = src.substring(cap[0].length); + if (cap[2] === '@') { + text = escape(cap[0]); + href = 'mailto:' + text; + } else { + text = escape(cap[0]); + if (cap[1] === 'www.') { + href = 'http://' + text; + } else { + href = text; + } + } + out += this.renderer.link(href, null, text); + continue; + } + + // tag + if (cap = this.rules.tag.exec(src)) { + if (!this.inLink && /^<a /i.test(cap[0])) { + this.inLink = true; + } else if (this.inLink && /^<\/a>/i.test(cap[0])) { + this.inLink = false; + } + src = src.substring(cap[0].length); + out += this.options.sanitize + ? this.options.sanitizer + ? this.options.sanitizer(cap[0]) + : escape(cap[0]) + : cap[0] + continue; + } + + // link + if (cap = this.rules.link.exec(src)) { + src = src.substring(cap[0].length); + this.inLink = true; + href = cap[2]; + if (this.options.pedantic) { + link = /^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(href); + + if (link) { + href = link[1]; + title = link[3]; + } else { + title = ''; + } + } else { + title = cap[3] ? cap[3].slice(1, -1) : ''; + } + href = href.trim().replace(/^<([\s\S]*)>$/, '$1'); + out += this.outputLink(cap, { + href: InlineLexer.escapes(href), + title: InlineLexer.escapes(title) + }); + this.inLink = false; + continue; + } + + // reflink, nolink + if ((cap = this.rules.reflink.exec(src)) + || (cap = this.rules.nolink.exec(src))) { + src = src.substring(cap[0].length); + link = (cap[2] || cap[1]).replace(/\s+/g, ' '); + link = this.links[link.toLowerCase()]; + if (!link || !link.href) { + out += cap[0].charAt(0); + src = cap[0].substring(1) + src; + continue; + } + this.inLink = true; + out += this.outputLink(cap, link); + this.inLink = false; + continue; + } + + // strong + if (cap = this.rules.strong.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.strong(this.output(cap[4] || cap[3] || cap[2] || cap[1])); + continue; + } + + // em + if (cap = this.rules.em.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.em(this.output(cap[6] || cap[5] || cap[4] || cap[3] || cap[2] || cap[1])); + continue; + } + + // code + if (cap = this.rules.code.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.codespan(escape(cap[2].trim(), true)); + continue; + } + + // br + if (cap = this.rules.br.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.br(); + continue; + } + + // del (gfm) + if (cap = this.rules.del.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.del(this.output(cap[1])); + continue; + } + + // text + if (cap = this.rules.text.exec(src)) { + src = src.substring(cap[0].length); + out += this.renderer.text(escape(this.smartypants(cap[0]))); + continue; + } + + if (src) { + throw new Error('Infinite loop on byte: ' + src.charCodeAt(0)); + } + } + + return out; +}; + +InlineLexer.escapes = function(text) { + return text ? text.replace(InlineLexer.rules._escapes, '$1') : text; +} + +/** + * Compile Link + */ + +InlineLexer.prototype.outputLink = function(cap, link) { + var href = link.href, + title = link.title ? escape(link.title) : null; + + return cap[0].charAt(0) !== '!' + ? this.renderer.link(href, title, this.output(cap[1])) + : this.renderer.image(href, title, escape(cap[1])); +}; + +/** + * Smartypants Transformations + */ + +InlineLexer.prototype.smartypants = function(text) { + if (!this.options.smartypants) return text; + return text + // em-dashes + .replace(/---/g, '\u2014') + // en-dashes + .replace(/--/g, '\u2013') + // opening singles + .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018') + // closing singles & apostrophes + .replace(/'/g, '\u2019') + // opening doubles + .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c') + // closing doubles + .replace(/"/g, '\u201d') + // ellipses + .replace(/\.{3}/g, '\u2026'); +}; + +/** + * Mangle Links + */ + +InlineLexer.prototype.mangle = function(text) { + if (!this.options.mangle) return text; + var out = '', + l = text.length, + i = 0, + ch; + + for (; i < l; i++) { + ch = text.charCodeAt(i); + if (Math.random() > 0.5) { + ch = 'x' + ch.toString(16); + } + out += '&#' + ch + ';'; + } + + return out; +}; + +/** + * Renderer + */ + +function Renderer(options) { + this.options = options || marked.defaults; +} + +Renderer.prototype.code = function(code, lang, escaped) { + if (this.options.highlight) { + var out = this.options.highlight(code, lang); + if (out != null && out !== code) { + escaped = true; + code = out; + } + } + + if (!lang) { + return '<pre><code>' + + (escaped ? code : escape(code, true)) + + '</code></pre>'; + } + + return '<pre><code class="' + + this.options.langPrefix + + escape(lang, true) + + '">' + + (escaped ? code : escape(code, true)) + + '</code></pre>\n'; +}; + +Renderer.prototype.blockquote = function(quote) { + return '<blockquote>\n' + quote + '</blockquote>\n'; +}; + +Renderer.prototype.html = function(html) { + return html; +}; + +Renderer.prototype.heading = function(text, level, raw) { + if (this.options.headerIds) { + return '<h' + + level + + ' id="' + + this.options.headerPrefix + + raw.toLowerCase().replace(/[^\w]+/g, '-') + + '">' + + text + + '</h' + + level + + '>\n'; + } + // ignore IDs + return '<h' + level + '>' + text + '</h' + level + '>\n'; +}; + +Renderer.prototype.hr = function() { + return this.options.xhtml ? '<hr/>\n' : '<hr>\n'; +}; + +Renderer.prototype.list = function(body, ordered, start) { + var type = ordered ? 'ol' : 'ul', + startatt = (ordered && start !== 1) ? (' start="' + start + '"') : ''; + return '<' + type + startatt + '>\n' + body + '</' + type + '>\n'; +}; + +Renderer.prototype.listitem = function(text) { + return '<li>' + text + '</li>\n'; +}; + +Renderer.prototype.checkbox = function(checked) { + return '<input ' + + (checked ? 'checked="" ' : '') + + 'disabled="" type="checkbox"' + + (this.options.xhtml ? ' /' : '') + + '> '; +} + +Renderer.prototype.paragraph = function(text) { + return '<p>' + text + '</p>\n'; +}; + +Renderer.prototype.table = function(header, body) { + if (body) body = '<tbody>' + body + '</tbody>'; + + return '<table>\n' + + '<thead>\n' + + header + + '</thead>\n' + + body + + '</table>\n'; +}; + +Renderer.prototype.tablerow = function(content) { + return '<tr>\n' + content + '</tr>\n'; +}; + +Renderer.prototype.tablecell = function(content, flags) { + var type = flags.header ? 'th' : 'td'; + var tag = flags.align + ? '<' + type + ' align="' + flags.align + '">' + : '<' + type + '>'; + return tag + content + '</' + type + '>\n'; +}; + +// span level renderer +Renderer.prototype.strong = function(text) { + return '<strong>' + text + '</strong>'; +}; + +Renderer.prototype.em = function(text) { + return '<em>' + text + '</em>'; +}; + +Renderer.prototype.codespan = function(text) { + return '<code>' + text + '</code>'; +}; + +Renderer.prototype.br = function() { + return this.options.xhtml ? '<br/>' : '<br>'; +}; + +Renderer.prototype.del = function(text) { + return '<del>' + text + '</del>'; +}; + +Renderer.prototype.link = function(href, title, text) { + if (this.options.sanitize) { + try { + var prot = decodeURIComponent(unescape(href)) + .replace(/[^\w:]/g, '') + .toLowerCase(); + } catch (e) { + return text; + } + if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) { + return text; + } + } + if (this.options.baseUrl && !originIndependentUrl.test(href)) { + href = resolveUrl(this.options.baseUrl, href); + } + try { + href = encodeURI(href).replace(/%25/g, '%'); + } catch (e) { + return text; + } + var out = '<a href="' + escape(href) + '"'; + if (title) { + out += ' title="' + title + '"'; + } + out += '>' + text + '</a>'; + return out; +}; + +Renderer.prototype.image = function(href, title, text) { + if (this.options.baseUrl && !originIndependentUrl.test(href)) { + href = resolveUrl(this.options.baseUrl, href); + } + var out = '<img src="' + href + '" alt="' + text + '"'; + if (title) { + out += ' title="' + title + '"'; + } + out += this.options.xhtml ? '/>' : '>'; + return out; +}; + +Renderer.prototype.text = function(text) { + return text; +}; + +/** + * TextRenderer + * returns only the textual part of the token + */ + +function TextRenderer() {} + +// no need for block level renderers + +TextRenderer.prototype.strong = +TextRenderer.prototype.em = +TextRenderer.prototype.codespan = +TextRenderer.prototype.del = +TextRenderer.prototype.text = function (text) { + return text; +} + +TextRenderer.prototype.link = +TextRenderer.prototype.image = function(href, title, text) { + return '' + text; +} + +TextRenderer.prototype.br = function() { + return ''; +} + +/** + * Parsing & Compiling + */ + +function Parser(options) { + this.tokens = []; + this.token = null; + this.options = options || marked.defaults; + this.options.renderer = this.options.renderer || new Renderer(); + this.renderer = this.options.renderer; + this.renderer.options = this.options; +} + +/** + * Static Parse Method + */ + +Parser.parse = function(src, options) { + var parser = new Parser(options); + return parser.parse(src); +}; + +/** + * Parse Loop + */ + +Parser.prototype.parse = function(src) { + this.inline = new InlineLexer(src.links, this.options); + // use an InlineLexer with a TextRenderer to extract pure text + this.inlineText = new InlineLexer( + src.links, + merge({}, this.options, {renderer: new TextRenderer()}) + ); + this.tokens = src.reverse(); + + var out = ''; + while (this.next()) { + out += this.tok(); + } + + return out; +}; + +/** + * Next Token + */ + +Parser.prototype.next = function() { + return this.token = this.tokens.pop(); +}; + +/** + * Preview Next Token + */ + +Parser.prototype.peek = function() { + return this.tokens[this.tokens.length - 1] || 0; +}; + +/** + * Parse Text Tokens + */ + +Parser.prototype.parseText = function() { + var body = this.token.text; + + while (this.peek().type === 'text') { + body += '\n' + this.next().text; + } + + return this.inline.output(body); +}; + +/** + * Parse Current Token + */ + +Parser.prototype.tok = function() { + switch (this.token.type) { + case 'space': { + return ''; + } + case 'hr': { + return this.renderer.hr(); + } + case 'heading': { + return this.renderer.heading( + this.inline.output(this.token.text), + this.token.depth, + unescape(this.inlineText.output(this.token.text))); + } + case 'code': { + return this.renderer.code(this.token.text, + this.token.lang, + this.token.escaped); + } + case 'table': { + var header = '', + body = '', + i, + row, + cell, + j; + + // header + cell = ''; + for (i = 0; i < this.token.header.length; i++) { + cell += this.renderer.tablecell( + this.inline.output(this.token.header[i]), + { header: true, align: this.token.align[i] } + ); + } + header += this.renderer.tablerow(cell); + + for (i = 0; i < this.token.cells.length; i++) { + row = this.token.cells[i]; + + cell = ''; + for (j = 0; j < row.length; j++) { + cell += this.renderer.tablecell( + this.inline.output(row[j]), + { header: false, align: this.token.align[j] } + ); + } + + body += this.renderer.tablerow(cell); + } + return this.renderer.table(header, body); + } + case 'blockquote_start': { + body = ''; + + while (this.next().type !== 'blockquote_end') { + body += this.tok(); + } + + return this.renderer.blockquote(body); + } + case 'list_start': { + body = ''; + var ordered = this.token.ordered, + start = this.token.start; + + while (this.next().type !== 'list_end') { + body += this.tok(); + } + + return this.renderer.list(body, ordered, start); + } + case 'list_item_start': { + body = ''; + + if (this.token.task) { + body += this.renderer.checkbox(this.token.checked); + } + + while (this.next().type !== 'list_item_end') { + body += this.token.type === 'text' + ? this.parseText() + : this.tok(); + } + + return this.renderer.listitem(body); + } + case 'loose_item_start': { + body = ''; + + while (this.next().type !== 'list_item_end') { + body += this.tok(); + } + + return this.renderer.listitem(body); + } + case 'html': { + // TODO parse inline content if parameter markdown=1 + return this.renderer.html(this.token.text); + } + case 'paragraph': { + return this.renderer.paragraph(this.inline.output(this.token.text)); + } + case 'text': { + return this.renderer.paragraph(this.parseText()); + } + } +}; + +/** + * Helpers + */ + +function escape(html, encode) { + return html + .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); +} + +function unescape(html) { + // explicitly match decimal, hex, and named HTML entities + return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig, function(_, n) { + n = n.toLowerCase(); + if (n === 'colon') return ':'; + if (n.charAt(0) === '#') { + return n.charAt(1) === 'x' + ? String.fromCharCode(parseInt(n.substring(2), 16)) + : String.fromCharCode(+n.substring(1)); + } + return ''; + }); +} + +function edit(regex, opt) { + regex = regex.source || regex; + opt = opt || ''; + return { + replace: function(name, val) { + val = val.source || val; + val = val.replace(/(^|[^\[])\^/g, '$1'); + regex = regex.replace(name, val); + return this; + }, + getRegex: function() { + return new RegExp(regex, opt); + } + }; +} + +function resolveUrl(base, href) { + if (!baseUrls[' ' + base]) { + // we can ignore everything in base after the last slash of its path component, + // but we might need to add _that_ + // https://tools.ietf.org/html/rfc3986#section-3 + if (/^[^:]+:\/*[^/]*$/.test(base)) { + baseUrls[' ' + base] = base + '/'; + } else { + baseUrls[' ' + base] = base.replace(/[^/]*$/, ''); + } + } + base = baseUrls[' ' + base]; + + if (href.slice(0, 2) === '//') { + return base.replace(/:[\s\S]*/, ':') + href; + } else if (href.charAt(0) === '/') { + return base.replace(/(:\/*[^/]*)[\s\S]*/, '$1') + href; + } else { + return base + href; + } +} +var baseUrls = {}; +var originIndependentUrl = /^$|^[a-z][a-z0-9+.-]*:|^[?#]/i; + +function noop() {} +noop.exec = noop; + +function merge(obj) { + var i = 1, + target, + key; + + for (; i < arguments.length; i++) { + target = arguments[i]; + for (key in target) { + if (Object.prototype.hasOwnProperty.call(target, key)) { + obj[key] = target[key]; + } + } + } + + return obj; +} + +function splitCells(tableRow, count) { + var cells = tableRow.replace(/([^\\])\|/g, '$1 |').split(/ +\| */), + i = 0; + + if (cells.length > count) { + cells.splice(count); + } else { + while (cells.length < count) cells.push(''); + } + + for (; i < cells.length; i++) { + cells[i] = cells[i].replace(/\\\|/g, '|'); + } + return cells; +} + +/** + * Marked + */ + +function marked(src, opt, callback) { + // throw error in case of non string input + if (typeof src === 'undefined' || src === null) { + throw new Error('marked(): input parameter is undefined or null'); + } + if (typeof src !== 'string') { + throw new Error('marked(): input parameter is of type ' + + Object.prototype.toString.call(src) + ', string expected'); + } + + if (callback || typeof opt === 'function') { + if (!callback) { + callback = opt; + opt = null; + } + + opt = merge({}, marked.defaults, opt || {}); + + var highlight = opt.highlight, + tokens, + pending, + i = 0; + + try { + tokens = Lexer.lex(src, opt) + } catch (e) { + return callback(e); + } + + pending = tokens.length; + + var done = function(err) { + if (err) { + opt.highlight = highlight; + return callback(err); + } + + var out; + + try { + out = Parser.parse(tokens, opt); + } catch (e) { + err = e; + } + + opt.highlight = highlight; + + return err + ? callback(err) + : callback(null, out); + }; + + if (!highlight || highlight.length < 3) { + return done(); + } + + delete opt.highlight; + + if (!pending) return done(); + + for (; i < tokens.length; i++) { + (function(token) { + if (token.type !== 'code') { + return --pending || done(); + } + return highlight(token.text, token.lang, function(err, code) { + if (err) return done(err); + if (code == null || code === token.text) { + return --pending || done(); + } + token.text = code; + token.escaped = true; + --pending || done(); + }); + })(tokens[i]); + } + + return; + } + try { + if (opt) opt = merge({}, marked.defaults, opt); + return Parser.parse(Lexer.lex(src, opt), opt); + } catch (e) { + e.message += '\nPlease report this to https://github.com/markedjs/marked.'; + if ((opt || marked.defaults).silent) { + return '<p>An error occurred:</p><pre>' + + escape(e.message + '', true) + + '</pre>'; + } + throw e; + } +} + +/** + * Options + */ + +marked.options = +marked.setOptions = function(opt) { + merge(marked.defaults, opt); + return marked; +}; + +marked.getDefaults = function () { + return { + baseUrl: null, + breaks: false, + gfm: true, + headerIds: true, + headerPrefix: '', + highlight: null, + langPrefix: 'language-', + mangle: true, + pedantic: false, + renderer: new Renderer(), + sanitize: false, + sanitizer: null, + silent: false, + smartLists: false, + smartypants: false, + tables: true, + xhtml: false + }; +} + +marked.defaults = marked.getDefaults(); + +/** + * Expose + */ + +marked.Parser = Parser; +marked.parser = Parser.parse; + +marked.Renderer = Renderer; +marked.TextRenderer = TextRenderer; + +marked.Lexer = Lexer; +marked.lexer = Lexer.lex; + +marked.InlineLexer = InlineLexer; +marked.inlineLexer = InlineLexer.output; + +marked.parse = marked; + +if (typeof module !== 'undefined' && typeof exports === 'object') { + module.exports = marked; +} else if (typeof define === 'function' && define.amd) { + define(function() { return marked; }); +} else { + root.marked = marked; +} +})(this || (typeof window !== 'undefined' ? window : global)); diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json b/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json new file mode 100644 index 000000000..f8b0fd023 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json @@ -0,0 +1,34 @@ +[ + { + "Id" : "recipebrowser-marked", + "Name" : "Marked (WebEngine Recipe Browser example)", + "QDocModule" : "qtwebengine", + "QtUsage" : "Marked is used in the WebEngine Recipe Browser example", + "QtParts" : ["examples"], + "Files" : "marked.js", + "Description" : + "A full-featured markdown parser and compiler, written in JavaScript. Built for speed.", + "Homepage" : "https://github.com/chjj/marked", + "Version" : "0.4.0", + "DownloadLocation" : "https://github.com/markedjs/marked/blob/0.4.0/lib/marked.js", + "Copyright" : "Copyright (c) 2011-2018, Christopher Jeffrey", + "License" : "MIT License", + "LicenseId" : "MIT", + "LicenseFile" : "MARKED-LICENSE.txt" + }, + { + "Id" : "recipebrowser-markdowncss", + "Name" : "Markdown.css (WebEngine Recipe Browser example)", + "QDocModule" : "qtwebengine", + "QtUsage" : "markdown.css is used in the WebEngine Recipe Browser example", + "QtParts" : ["examples"], + "Files" : "markdown.css", + "Description" : "Markdown.css is better default styling for your Markdown files.", + "Version" : "188530e4b5d020d7e237fc6b26be13ebf4a8def3", + "DownloadLocation" : "https://bitbucket.org/kevinburke/markdowncss/src/188530e4b5d020d7e237fc6b26be13ebf4a8def3/markdown.css", + "Copyright" : "Copyright 2011 Kevin Burke Copyright Twitter Inc.", + "License" : "Apache License 2.0", + "LicenseId" : "Apache-2.0", + "LicenseFile" : "MARKDOWN-LICENSE.txt" + } + ] diff --git a/examples/webenginewidgets/recipebrowser/assets/custom.css b/examples/webenginewidgets/recipebrowser/assets/custom.css new file mode 100644 index 000000000..cc1106af3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/custom.css @@ -0,0 +1,28 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +body { + padding-top: 0; + margin-top: 0; +} + +#content { + display: none; +} + +img { + width: 100%; + height: 100%; +} + +li { + margin-left: 25px; +} + +ol li { + margin-bottom: 10px; +} + +* { + max-width: 960px !important; +} diff --git a/examples/webenginewidgets/recipebrowser/assets/custom.js b/examples/webenginewidgets/recipebrowser/assets/custom.js new file mode 100644 index 000000000..34470164e --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/custom.js @@ -0,0 +1,13 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +marked.setOptions({ + renderer : new marked.Renderer(), + gfm : true, + tables : true, + breaks : false, + pedantic : false, + sanitize : false, + smartLists : true, + smartypants : false +}); diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/burger.html b/examples/webenginewidgets/recipebrowser/assets/pages/burger.html new file mode 100644 index 000000000..99497959f --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/burger.html @@ -0,0 +1,96 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Insanity Burger</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/burger.jpg" alt="Insanity Burger" title="Insanity Burger" /> + +Insanity burger +=============== + +### Ingredients + +* 800 g minced chuck steak +* olive oil +* 1 large red onion +* 1 splash of white wine vinegar +* 2 large gherkins +* 4 sesame-topped brioche burger buns +* 4-8 rashers of smoked streaky bacon +* 4 teaspoons American mustard +* Tabasco Chipotle sauce +* 4 thin slices of Red Leicester cheese +* 4 teaspoons tomato ketchup + +#### For the burger sauce +* ¼ of an iceberg lettuce +* 2 heaped tablespoons mayonnaise +* 1 heaped tablespoon tomato ketchup +* 1 teaspoon Tabasco Chipotle sauce +* 1 teaspoon Worcestershire sauce +* 1 teaspoon brandy, or bourbon (optional) + +### Instructions +For the best burger, go to your butcher’s and ask them to mince 800g of chuck steak for you. +This cut has a really good balance of fat and flavoursome meat. Divide it into 4 and, with wet +hands, roll each piece into a ball, then press into flat patties roughly 12cm wide and about 2cm +wider than your buns. Place on an oiled plate and chill in the fridge. Next, finely slice the red +onion, then dress in a bowl with the vinegar and a pinch of sea salt. Slice the gherkins and halve +the buns. Finely chop the lettuce and mix with the rest of the burger sauce ingredients in a bowl, +then season to taste. + +I like to only cook 2 burgers at a time to achieve perfection, so get two pans on the go – a large +non-stick pan on a high heat for your burgers and another on a medium heat for the bacon. Pat your +burgers with oil and season them with salt and pepper. Put 2 burgers into the first pan, pressing +down on them with a fish slice, then put half the bacon into the other pan. After 1 minute, flip +the burgers and brush each cooked side with ½ a teaspoon of mustard and a dash of Tabasco. After +another minute, flip onto the mustard side and brush again with another ½ teaspoon of mustard and +a second dash of Tabasco on the other side. Cook for one more minute, by which point you can place +some crispy bacon on top of each burger with a slice of cheese. Add a tiny splash of water to the +pan and place a heatproof bowl over the burgers to melt the cheese – 30 seconds should do it. At the +same time, toast 2 split buns in the bacon fat in the other pan until lightly golden. Repeat with +the remaining two burgers. + +To build each burger, add a quarter of the burger sauce to the bun base, then top with a cheesy +bacon burger, a quarter of the onions and gherkins. Rub the bun top with a teaspoon of ketchup, +then gently press together. As the burger rests, juices will soak into the bun, so serve right +away, which is great, or for an extra filthy experience, wrap each one in greaseproof paper, then +give it a minute to go gorgeous and sloppy. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html b/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html new file mode 100644 index 000000000..e8e14a9b6 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Cupcakes</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/cupcakes.jpg" alt="Cupcakes" title="Cupcakes" /> + +Cupcakes +============= + +### Ingredients + +* 300 g caster sugar +* 150 ml sunflower oil +* 1 teaspoon vanilla extract +* 500 g dairy-free soya yoghurt +* 2 teaspoons cider vinegar +* 350 g plain flour +* 1 teaspoon bicarbonate of soda +* 1½ teaspoons baking powder + +#### For the vegan vanilla icing +* 200 g dairy-free soya spread , chilled +* 660 g icing sugar +* ½ teaspoon vanilla extract + +### Instructions +1. Preheat the oven to 170°C fan/375°F/gas 5. +2. Place the sugar, oil and vanilla extract in a large bowl, then beat with an electric mixer for 1 to 2 minutes, until well combined. +3. Mix the yoghurt and vinegar together in a bowl, then add to the mixture and beat for 1 to 2 minutes. +4. Add the remaining cupcake ingredients and 1 teaspoon of fine sea salt, then whisk until smooth and just combined. +5. Fill the paper cases two-thirds full with mixture, but don’t bother to smooth it out. +6. Bake for 20 minutes, or until they spring back when touched. Leave to cool, transferring to a wire cooling rack after 5 minutes. +7. Meanwhile, make the icing. Beat the soya spread with an electric mixer for 1 to 2 minutes, or until smooth. +8. Sift the icing sugar into a large bowl, then add to the soya spread in two stages, beating well between each. +9. Add the vanilla extract and a small splash of water, then whisk for a further few minutes, or until silky smooth – if it’s too stiff, add a splash more water to loosen. +10. Once the cupcakes are cool, decorate them with the icing and add a few sprinkles too if you like – whatever takes your fancy – then enjoy. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg Binary files differnew file mode 100644 index 000000000..edc0c65de --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg Binary files differnew file mode 100644 index 000000000..cce52ba23 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg Binary files differnew file mode 100644 index 000000000..7ac924b79 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg Binary files differnew file mode 100644 index 000000000..8d8f756af --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg Binary files differnew file mode 100644 index 000000000..6bb2f1172 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg Binary files differnew file mode 100644 index 000000000..fc9dff906 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg Binary files differnew file mode 100644 index 000000000..240b72eb4 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html b/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html new file mode 100644 index 000000000..c2b3d840a --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Pasta</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/pasta.jpg" alt="Pasta" title="Pasta" /> + +Pasta +============= + +### Ingredients + +* 2 red peppers , deseeded and sliced +* 2 yellow peppers , deseeded and sliced +* extra virgin olive oil +* sea salt +* freshly ground black pepper +* 2 red onions , peeled and finely sliced +* 2 cloves garlic , peeled and grated +* 2 handfuls fresh flat-leaf parsley , leaves finely chopped, stalks reserved +* 2 tablespoons red wine vinegar or balsamic vinegar +* 2 handfuls Parmesan cheese , grated +* 2 heaped tablespoons mascarpone cheese or crème fraîche , optional +* 455 g rigatoni, penne or spaghetti + + +### Instructions +1. Put all the peppers in a large frying pan over a medium heat with a little olive oil and a pinch of salt and pepper. +2. Place a lid on, and cook slowly for 15 minutes until softened. Don't rush this too much, as cooking the peppers slowly like this really helps to bring out the flavour. +3. Add the onion and cook for a further 20 minutes. +4. Then add the garlic and parsley stalks and toss around, keeping everything moving in the pan. +5. Cook for about 3 minutes most. Have a little taste, and season with a bit more salt and pepper. +5. Add the vinegar - it will sizzle away, so give everything a good toss. +6. Then add one handful of the grated Parmesan and the mascarpone or crème fraîche if you are using it and turn the heat down to minimum while you cook the pasta. +7. Meanwhile put a large pot of salted water on to boil. +8. Add the pasta to the boiling water and cook according to the packet instructions. +9. When cooked, drain in a colander, reserving some of the cooking water. +10. Put the peppers, pasta and parsley leaves into a large warmed bowl. +11. Give them a good toss together, then add a little of the pasta cooking water and a few good lugs of extra virgin olive oil to coat the pasta nicely. +12. Serve straight away sprinkled with the rest of the Parmesan. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html b/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html new file mode 100644 index 000000000..7e390a373 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Pizza Diavola</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/pizza.jpg" alt="Pizza Diavola" title="Pizza Diavola" /> + +Pizza Diavola +============= + +### Ingredients + +* 2 pizza dough balls +* 100g Mozzarella +* 400g Passata +* 200 g Spicy Salami +* 2 fresh chillies +* Extra virgin olive oil +* Salt + +### Instructions +1. Preheat oven to 210 oc. +2. Get your pizza dough balls ( depending on how many you are making) and roll them out to about 12 inches diameter using your hands in a circular stretching technique or using a rolling pin. +3. With the dough prepared now get our sauce ready by mixing the passata with three tbsp of the olive oil and a good pinch of salt. +4. Now slice up your salami into thin-ish slices and also finely chop the fresh chillies. +5. Next, slice or dice your mozzarella and we are ready to dress the pizza. +6. Add half the tomato sauce to each base and spread evenly leaving a half inch perimeter. +7. Add the mozzarella, salami and finish with the chillies. +8. Finally drizzle with some more olive oil and your are ready to cook your pizza diavola. +9. Place in the oven for ten minutes or until golden. +10. Remove from the oven, slice, and enjoy your pizza diavola. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html b/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html new file mode 100644 index 000000000..db2df5472 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Grilled skewers</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/skewers.jpg" alt="Grilled skewers" title="Grilled skewers" /> + +Grilled skewers +====================== + +### Ingredients + +* 3 cloves of garlic +* 200g kefalotyri cheese +* 2 medium aubergine +* 1 iceberg lettuce +* 1 tablespoon coriander seeds +* 2 teaspoons dried oregano +* 2 lemons +* 4 tablespoons olive oil +* 600g lamb neck fillet , in 2cm chunks +* 12 fresh bay leaves + +### Instructions +1. Peel and crush the garlic. +2. Chop the cheese into bite-sized pieces, trim and chop the aubergines into 2cm chunks, and trim and finely slice the lettuce. +3. Finely crush the coriander seeds in a pestle and mortar and add to a large bowl with the oregano and garlic. Finely grate in the lemon zest (reserve the zested lemons) and stir in the oil. +4. Season, then add the cheese, lamb, aubergines and bay leaves. Leave to marinate for at least an hour, or overnight if you can. +5. Meanwhile, pickle your cabbage. Trim, core and finely slice the cabbage, then place in a colander in the sink or over a bowl and toss with 2 teaspoons of sea salt. Cover and set aside for at least 2 hours, then rinse. +6. Peel and finely slice the onions, then transfer to a bowl along with the cabbage. +7. Put the remaining ingredients in a pan and bring to a boil. Simmer for 10 minutes, then pour over the cabbage and onions. Transfer to sterilised jars – this will keep for up to 1 month. +8. For the flatbreads, put the flour, baking powder, buttermilk and half of the sesame seeds in a bowl and mix until everything is combined. +9. Tip onto a lightly floured surface and knead briefly. Divide into six, using a rolling pin to roll them into 1 to 2mm rounds. +10. Scatter with the remaining sesame seeds and run the rolling pin over them. Pop the flatbreads onto the hot barbecue for 1 to 2 minutes on each side. +11. Load 12 skewers with the cheese, lamb, aubergines and bay leaves, then place on the barbecue (not directly over the coals) for 20 to 25 minutes, turning often, until the lamb is medium-rare and the aubergines are cooked. +12. Serve the lamb with the flatbreads, cabbage, lettuce and lemon wedges. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/soup.html b/examples/webenginewidgets/recipebrowser/assets/pages/soup.html new file mode 100644 index 000000000..ea51fc8a5 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/soup.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Soup</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/soup.jpg" alt="Soup" title="Soup" /> + +Soup +============= + +### Ingredients + +* 2 potatoes +* 2 onions +* 2 cloves of garlic +* olive oil +* 400 ml organic stock +* 3 bunches of watercress + +### Instructions +* Peel and roughly chop the potatoes, onions and garlic. +* In a large saucepan, heat a little olive oil, then sauté the potato, onion and garlic until the onions are translucent. +* Add the stock and simmer until the potato is soft. Chop and add the watercress and simmer for a further 3 to 4 minutes. +* Using a hand blender, liquidise the soup until smooth. +* Serve with a swirl of crème fraîche and some Fortt’s Bath Oliver biscuits, if you like. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/steak.html b/examples/webenginewidgets/recipebrowser/assets/pages/steak.html new file mode 100644 index 000000000..26391b409 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/steak.html @@ -0,0 +1,88 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Grilled steak and rice</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/steak.jpg" alt="Grilled steak and rice" title="Grilled steak and rice" /> + +Grilled steak and rice +====================== + +### Ingredients + +#### For the ratatouille +* courgette +* 1 small aubergine +* 2 mixed-color peppers +* 1 red onion +* 1 heaped teaspoon harissa +* 2 anchovy fillets +* 2-4 cloves of garlic +* 700 g passata +* 1 tablespoon balsamic vinegar +* ½ bunch fresh basil +* 2 tablespoons fat-free natural yoghurt + +#### For the rice +* 1 mug (300g) 10-minute wholegrain or basmati rice +* 1 good pinch saffron +* ½ lemon + +#### For the steak +* 2 x 250 g quality sirloin steaks, fat removed +* 1 teaspoon sweet paprika olive oil +* ½ bunch fresh flat-leaf parsley +* 1 heaped teaspoon Dijon mustard +* 1 tablespoon extra virgin olive oil +* ½ lemon + +### Instructions +1. Halve the courgette lengthways, slice the aubergine 1cm thick and place both on the griddle pan, turning when charred. +2. Put 1 mug of rice, 2 mugs of boiling water, the saffron, lemon half and a pinch of salt into the small pan, cover and cook until fluffy, stirring occasionally. +3. Tear the seeds and stalks out of the peppers, then roughly chop with the peeled red onion and put into the casserole pan with the harissa, anchovies and 1 teaspoon of their oil. +4. Squash in the unpeeled garlic through a garlic crusher and stir regularly. +5. Remove the charred courgette and aubergine from the griddle pan, leaving it on the heat, and roughly chop them on a board. +6. Add them to the casserole pan along with the passata and vinegar, and boil with the lid on. +7. Rub the steaks with salt, the paprika and 1 teaspoon of olive oil and place on the hot griddle pan, turning every minute until cooked to your liking. +8. On a board, finely slice the parsley stalks and roughly chop the leaves. +9. Add the mustard and extra virgin olive oil, season with salt and pepper and squeeze over the lemon juice, then mix together and spread over the board. +10. When the steaks are done, transfer them to the board, turn in the dressing, then slice. +11. Tear the top leafy half of the basil into the ratatouille, season to taste, and serve with yoghurt and saffron rice. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp b/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp Binary files differnew file mode 100644 index 000000000..8446bcde3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp diff --git a/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc b/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc new file mode 100644 index 000000000..4ac9973b3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc @@ -0,0 +1,197 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + \example webenginewidgets/recipebrowser + \title Recipe Browser + \meta category {Application Examples} + \meta tag {widgets, webengine, webchannel, webenginescript} + \ingroup webengine-widgetexamples + \brief Injecting custom stylsheets into web pages and providing a rich text preview + tool for a custom markup language. + + \image recipebrowser.webp + + \e {Recipe Browser} is a small hybrid web browser application. It demonstrates how to + use the \l{Qt WebEngine Widgets C++ Classes} {Qt WebEngine C++ classes} to combine + C++ and JavaScript logic in the following ways. + + \list + \li Running arbitrary JavaScript code via \c QWebEnginePage::runJavaScript() to + inject custom CSS stylesheets + \li Using QWebEngineScript and QWebEngineScriptCollection to persist the JavaScript + code and inject it to every page + \li Using QWebChannel to interact with and provide a rich text preview for a custom + markup language + \endlist + + \l{http://daringfireball.net/projects/markdown/}{Markdown} is a lightweight + markup language with a plain text formatting syntax. + Some services, such as \l{http://github.com}{github}, acknowledge the + format, and render the content as rich text when viewed in a browser. + + The Recipe Browser main window is split into a navigation on the left and + a preview area on the right. The preview area on the right switches to an + editor when the user clicks the Edit button on the top left of the main window. + The editor supports the Markdown syntax and is implemented by using + QPlainTextEdit. The document is rendered as rich text in the preview area, + once the user clicks the View button,to which the Edit button transforms to. + This rendering is implemented by using QWebEngineView. To render the text, + a JavaScript library inside the web engine converts the Markdown text to HTML. + The preview is updated from the editor through QWebChannel. + + \include examples-run.qdocinc + + \section1 Exposing Document Text + + To render the current Markdown text it needs to be exposed to the web engine through + QWebChannel. To achieve this it has to be part of Qt metatype system. This is done + by using a dedicated \c Document class that exposes the document text as a + \c {Q_PROPERTY}: + + \quotefromfile webenginewidgets/recipebrowser/document.h + \skipto class Document + \printto #endif + + The \c Document class wraps a QString \c m_currentText to be set on the C++ + side with the \c setText() method and exposes it at runtime as a \c text + property with a \c textChanged signal. We define the \c setText method as + follows: + + \quotefromfile webenginewidgets/recipebrowser/document.cpp + \skipto Document::setText(const QString &text) + \printuntil /^\}/ + + Additionally, the \c Document class keeps track of the current recipe via + \c m_currentPage. We call the recipes pages here, because each recipe has + its distinct HTML document that contains the initial text content. + Furthermore, \c m_textCollection is a QMap<QString, QString> that contains + the key/value pairs \{page, text\}, so that changes made to the text content + of a page is persisted between navigation. Nevertheless, we do not write the + modified text contents to the drive, but instead we persist them between + application start and shutdown via QSettings. + + \section1 Creating the Main Window + + The \c MainWindow class inherits the QMainWindow class: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.h + \skipto class MainWindow : + \printto endif + + The class declares private slots that match the two buttons on the + top left, over the navigation list view. Additionally, helper + methods for custom CSS stylesheets are declared. + + The actual layout of the main window is specified in a \c .ui file. + The widgets and actions are available at runtime in the \c ui member + variable. + + \c m_isEditMode is a boolean that toggles between the editor and the + preview area. + \c m_content is an instance of the \c Document class. + + The actual setup of the different objects is done in the \c MainWindow + constructor: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::MainWindow + \printto connect + + The constructor first calls \c setupUi to construct the widgets and menu + actions according to the UI file. The text editor font is set to one + with a fixed character width, and the QWebEngineView widget is told not + to show a context menu. Furthermore, the editor is hidden away. + + \printto ui->recipes + + Here the \c clicked signals of QPushButton are connected to respective functions + that show the stylesheets dialog or toggle between edit and view mode, that is, + hide and show the editor and preview area respectively. + + \printto m_content.setTextEdit + + Here the navigation QListWidget on the left is setup with the 7 recipes. + Also, the currentItemChanged signal of QListWidget is connected to a lambda + that loads the new, current recipe page and updates the page in \c m_content. + + \printto connect + + Next, the pointer to the ui editor, a QPlainTextEdit, is passed to \c m_content to ensure that + calls to \c Document::setInitialText() work properly. + + \printto QSettings + + Here the \c textChanged signal of the editor is connected to a lambda that + updates the text in \c m_content. This object is then exposed to the JS side + by \c QWebChannel under the name \c{content}. + + \printto ui->recipes + + By using QSettings we persist stylesheets between application runs. If there + should be no stylesheets configured, for example, because the user deleted all of them + in a previous run, we load default ones. + + \printto } + + Finally, we set the currently selected list item to the first contained in the + navigation list widget. This triggers the previously mentioned + QListWidget::currentItemChanged signal and navigates to the page of the list item. + + \section1 Working With Stylesheets + + We use JavaScript to create and append CSS elements to the documents. + After declaring the script source, QWebEnginePage::runJavaScript() can run it + immediately and apply newly created styles on the current content of the web view. + Encapsulating the script into a QWebEngineScript and adding it to the script collection + of QWebEnginePage makes its effect permanent. + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::insertStyleSheet + \printuntil /^\}/ + + Removing stylesheets can be done similarly: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::removeStyleSheet + \printuntil /^\}/ + + \section1 Creating a recipe file + + \quotefile webenginewidgets/recipebrowser/assets/pages/burger.html + + All the different recipe pages are set up the same way. + + In the \c <head> part they + include two CSS files: \c markdown.css, that styles the markdown, and + custom.css, that does some further styling but most importantly hides the + \c <div> with id \e content, as this \c <div> only contains the unmodified, + initial content text. Also, three JS scripts are included. \c marked.js + is responsible for parsing the markdown and transforming it into HTML. + \c custom.js does some configuration of \c marked.js, and \c qwebchannel.js + exposes the QWebChannel JavaScript API. + + In the body there are two \c <div> elements. The \c <div> with id \e placeholder + gets the markdown text injected that is rendered and visible. The \c <div> with id + \e content is hidden by \c custom.css and only contains the original, unmodified + text content of the recipe. + + Finally, on the bottom of each recipe HTML file is a script that is responsible for + the communication between the C++ and JavaScript side via QWebChannel. The original, + unmodified text content inside the \c <div> with id \e content is passed to the C++ + side and a callback is setup that is invoked when the \c textChanged signal of + \c m_content is emitted. The callback then updates the contents of the \c <div> + \e placeholder with the parsed markdown. + + \section1 Files and Attributions + + The example bundles the following code with third-party licenses: + \table + \row + \li \l{recipebrowser-marked}{Marked} + \li MIT License + \row + \li \l{recipebrowser-markdowncss}{Markdown.css} + \li Apache License 2.0 + \endtable +*/ diff --git a/examples/webenginewidgets/recipebrowser/document.cpp b/examples/webenginewidgets/recipebrowser/document.cpp new file mode 100644 index 000000000..c991e14f8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/document.cpp @@ -0,0 +1,48 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "document.h" + +#include <QSettings> + +Document::Document(QObject *parent) : QObject(parent) +{ + QSettings settings; + settings.beginGroup("textCollection"); + QStringList pageTexts = settings.allKeys(); + for (const QString &name : std::as_const(pageTexts)) { + QString pageText = settings.value(name).value<QString>(); + if (!pageText.isEmpty()) + m_textCollection.insert(name, pageText); + } + settings.endGroup(); +} + +void Document::setTextEdit(QPlainTextEdit *textEdit) +{ + m_textEdit = textEdit; +} + +void Document::setCurrentPage(const QString &page) +{ + m_currentPage = page; +} + +void Document::setInitialText(const QString &text) +{ + m_textEdit->setPlainText(m_textCollection.value(m_currentPage, text)); +} + +void Document::setText(const QString &text) +{ + if (text == m_currentText) + return; + m_currentText = text; + emit textChanged(m_currentText); + + QSettings settings; + settings.beginGroup("textCollection"); + settings.setValue(m_currentPage, text); + m_textCollection.insert(m_currentPage, text); + settings.endGroup(); +} diff --git a/examples/webenginewidgets/recipebrowser/document.h b/examples/webenginewidgets/recipebrowser/document.h new file mode 100644 index 000000000..f6b537eb8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/document.h @@ -0,0 +1,36 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#ifndef DOCUMENT_H +#define DOCUMENT_H + +#include <QObject> +#include <QString> +#include <QPlainTextEdit> + +class Document : public QObject +{ + Q_OBJECT + Q_PROPERTY(QString text MEMBER m_currentText NOTIFY textChanged FINAL) +public: + explicit Document(QObject *parent = nullptr); + + void setTextEdit(QPlainTextEdit *textEdit); + void setCurrentPage(const QString &page); + +public slots: + void setInitialText(const QString &text); + void setText(const QString &text); + +signals: + void textChanged(const QString &text); + +private: + QPlainTextEdit *m_textEdit; + + QString m_currentText; + QString m_currentPage; + QMap<QString, QString> m_textCollection; +}; + +#endif // DOCUMENT_H diff --git a/examples/webenginewidgets/recipebrowser/main.cpp b/examples/webenginewidgets/recipebrowser/main.cpp new file mode 100644 index 000000000..b0b42d16b --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/main.cpp @@ -0,0 +1,18 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "mainwindow.h" +#include "stylesheetdialog.h" +#include <QApplication> +#include <QUrl> + +int main(int argc, char *argv[]) +{ + qRegisterMetaType<StyleSheet>("StyleSheet"); + + QCoreApplication::setOrganizationName("QtExamples"); + QApplication a(argc, argv); + MainWindow w; + w.show(); + return a.exec(); +} diff --git a/examples/webenginewidgets/recipebrowser/mainwindow.cpp b/examples/webenginewidgets/recipebrowser/mainwindow.cpp new file mode 100644 index 000000000..7288fe4ce --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/mainwindow.cpp @@ -0,0 +1,153 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "mainwindow.h" +#include "stylesheetdialog.h" +#include "ui_mainwindow.h" + +#include <QWebChannel> + +static QMap<QString, QString> defaultStyleSheets = { + { "Upside down", "body { -webkit-transform: rotate(180deg); }" }, + { "Darkmode", + "body { color: #FFF; background-color: #000 }" + "h1, h2, h3, h4, h5 { color: #FFF }" } +}; + +MainWindow::MainWindow(QWidget *parent) + : QMainWindow(parent), ui(new Ui::MainWindow), m_isEditMode(false) +{ + ui->setupUi(this); + ui->textEdit->setFont(QFontDatabase::systemFont(QFontDatabase::FixedFont)); + ui->textEdit->hide(); + ui->webEngineView->setContextMenuPolicy(Qt::NoContextMenu); + + connect(ui->stylesheetsButton, &QPushButton::clicked, this, &MainWindow::showStyleSheetsDialog); + connect(ui->editViewButton, &QPushButton::clicked, this, &MainWindow::toggleEditView); + + ui->recipes->insertItem(0, "Burger"); + ui->recipes->insertItem(1, "Cupcakes"); + ui->recipes->insertItem(2, "Pasta"); + ui->recipes->insertItem(3, "Pizza"); + ui->recipes->insertItem(4, "Skewers"); + ui->recipes->insertItem(5, "Soup"); + ui->recipes->insertItem(6, "Steak"); + connect(ui->recipes, &QListWidget::currentItemChanged, this, + [this](QListWidgetItem *current, QListWidgetItem * /* previous */) { + const QString page = current->text().toLower(); + const QString url = QStringLiteral("qrc:/pages/") + page + QStringLiteral(".html"); + ui->webEngineView->setUrl(QUrl(url)); + m_content.setCurrentPage(page); + }); + + m_content.setTextEdit(ui->textEdit); + + connect(ui->textEdit, &QPlainTextEdit::textChanged, this, + [this]() { m_content.setText(ui->textEdit->toPlainText()); }); + + QWebChannel *channel = new QWebChannel(this); + channel->registerObject(QStringLiteral("content"), &m_content); + ui->webEngineView->page()->setWebChannel(channel); + + QSettings settings; + settings.beginGroup("styleSheets"); + QStringList styleSheets = settings.allKeys(); + if (styleSheets.empty()) { + // Add back default style sheets if the user cleared them out + loadDefaultStyleSheets(); + } else { + for (const auto &name : std::as_const(styleSheets)) { + StyleSheet styleSheet = settings.value(name).value<StyleSheet>(); + if (styleSheet.second) + insertStyleSheet(name, styleSheet.first, false); + } + } + settings.endGroup(); + + ui->recipes->setCurrentItem(ui->recipes->item(0)); +} + +MainWindow::~MainWindow() +{ + delete ui; +} + +void MainWindow::insertStyleSheet(const QString &name, const QString &source, bool immediately) +{ + QWebEngineScript script; + QString s = QString::fromLatin1("(function() {" + " css = document.createElement('style');" + " css.type = 'text/css';" + " css.id = '%1';" + " document.head.appendChild(css);" + " css.innerText = '%2';" + "})()") + .arg(name, source.simplified()); + if (immediately) + ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); + + script.setName(name); + script.setSourceCode(s); + script.setInjectionPoint(QWebEngineScript::DocumentReady); + script.setRunsOnSubFrames(true); + script.setWorldId(QWebEngineScript::ApplicationWorld); + ui->webEngineView->page()->scripts().insert(script); +} + +void MainWindow::removeStyleSheet(const QString &name, bool immediately) +{ + QString s = QString::fromLatin1("(function() {" + " var element = document.getElementById('%1');" + " element.outerHTML = '';" + " delete element;" + "})()") + .arg(name); + if (immediately) + ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); + + const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); + if (!scripts.isEmpty()) + ui->webEngineView->page()->scripts().remove(scripts.first()); +} + +bool MainWindow::hasStyleSheet(const QString &name) +{ + const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); + return !scripts.isEmpty(); +} + +void MainWindow::loadDefaultStyleSheets() +{ + QSettings settings; + settings.beginGroup("styleSheets"); + + for (auto it = defaultStyleSheets.constBegin(); it != defaultStyleSheets.constEnd(); ++it) { + settings.setValue(it.key(), QVariant::fromValue(qMakePair(it.value(), true))); + insertStyleSheet(it.key(), it.value(), false); + } + + settings.endGroup(); +} + +void MainWindow::showStyleSheetsDialog() +{ + StylesheetDialog *dialog = new StylesheetDialog(this); + dialog->show(); +} + +void MainWindow::toggleEditView() +{ + m_isEditMode = !m_isEditMode; + + if (m_isEditMode) { + ui->webEngineView->hide(); + ui->textEdit->show(); + + ui->editViewButton->setText(QStringLiteral("View")); + } else { + ui->textEdit->hide(); + ui->webEngineView->show(); + + ui->editViewButton->setText(QStringLiteral("Edit")); + } +} diff --git a/examples/webenginewidgets/recipebrowser/mainwindow.h b/examples/webenginewidgets/recipebrowser/mainwindow.h new file mode 100644 index 000000000..959c82af8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/mainwindow.h @@ -0,0 +1,44 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#ifndef MAINWINDOW_H +#define MAINWINDOW_H + +#include "document.h" +#include <QMainWindow> +#include <QSettings> +#include <QWebEngineScriptCollection> +#include <QWebEngineView> +#include <QPlainTextEdit> + +QT_BEGIN_NAMESPACE +namespace Ui { +class MainWindow; +} +QT_END_NAMESPACE + +class MainWindow : public QMainWindow +{ + Q_OBJECT + +public: + explicit MainWindow(QWidget *parent = nullptr); + ~MainWindow(); + + void insertStyleSheet(const QString &name, const QString &source, bool immediately); + void removeStyleSheet(const QString &name, bool immediately); + bool hasStyleSheet(const QString &name); + void loadDefaultStyleSheets(); + +private slots: + void showStyleSheetsDialog(); + void toggleEditView(); + +private: + Ui::MainWindow *ui; + + bool m_isEditMode; + Document m_content; +}; + +#endif // MAINWINDOW_H diff --git a/examples/webenginewidgets/recipebrowser/mainwindow.ui b/examples/webenginewidgets/recipebrowser/mainwindow.ui new file mode 100644 index 000000000..b7c29f1b8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/mainwindow.ui @@ -0,0 +1,106 @@ +<?xml version="1.0" encoding="UTF-8"?> +<ui version="4.0"> + <class>MainWindow</class> + <widget class="QMainWindow" name="MainWindow"> + <property name="geometry"> + <rect> + <x>0</x> + <y>0</y> + <width>713</width> + <height>455</height> + </rect> + </property> + <property name="windowTitle"> + <string>Recipe Browser</string> + </property> + <property name="unifiedTitleAndToolBarOnMac"> + <bool>false</bool> + </property> + <widget class="QWidget" name="centralWidget"> + <layout class="QGridLayout" name="gridLayout"> + <item row="0" column="0"> + <layout class="QHBoxLayout" name="horizontalLayout"> + <item> + <layout class="QVBoxLayout" name="navigation"> + <item> + <layout class="QHBoxLayout" name="navigationBar"> + <item> + <widget class="QLabel" name="label"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Preferred" vsizetype="Fixed"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + <property name="text"> + <string>Recipes</string> + </property> + <property name="alignment"> + <set>Qt::AlignCenter</set> + </property> + </widget> + </item> + <item> + <widget class="QPushButton" name="editViewButton"> + <property name="text"> + <string>Edit</string> + </property> + </widget> + </item> + <item> + <widget class="QPushButton" name="stylesheetsButton"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Fixed" vsizetype="Fixed"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + <property name="text"> + <string>Stylesheets</string> + </property> + </widget> + </item> + </layout> + </item> + <item> + <widget class="QListWidget" name="recipes"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Preferred" vsizetype="Expanding"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + </widget> + </item> + </layout> + </item> + <item> + <widget class="QWebEngineView" name="webEngineView" native="true"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Expanding" vsizetype="Expanding"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + </widget> + </item> + <item> + <widget class="QPlainTextEdit" name="textEdit"/> + </item> + </layout> + </item> + </layout> + </widget> + </widget> + <layoutdefault spacing="6" margin="11"/> + <customwidgets> + <customwidget> + <class>QWebEngineView</class> + <extends>QWidget</extends> + <header>qwebengineview.h</header> + <container>1</container> + </customwidget> + </customwidgets> + <resources/> + <connections/> +</ui> diff --git a/examples/webenginewidgets/recipebrowser/recipebrowser.pro b/examples/webenginewidgets/recipebrowser/recipebrowser.pro new file mode 100644 index 000000000..8f8895b52 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/recipebrowser.pro @@ -0,0 +1,24 @@ +TEMPLATE = app +TARGET = recipebrowser +QT += webenginewidgets + +HEADERS += \ + mainwindow.h \ + stylesheetdialog.h \ + document.h + +SOURCES += \ + main.cpp \ + mainwindow.cpp \ + stylesheetdialog.cpp \ + document.cpp + +FORMS += \ + mainwindow.ui \ + stylesheetdialog.ui + +RESOURCES += recipebrowser.qrc + +# install +target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/recipebrowser +INSTALLS += target diff --git a/examples/webenginewidgets/recipebrowser/recipebrowser.qrc b/examples/webenginewidgets/recipebrowser/recipebrowser.qrc new file mode 100644 index 000000000..2dc003f30 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/recipebrowser.qrc @@ -0,0 +1,15 @@ +<RCC> + <qresource prefix="/"> + <file>assets/3rdparty/markdown.css</file> + <file>assets/3rdparty/marked.js</file> + <file>assets/custom.js</file> + <file>assets/custom.css</file> + <file>assets/pages/burger.html</file> + <file>assets/pages/cupcakes.html</file> + <file>assets/pages/pasta.html</file> + <file>assets/pages/pizza.html</file> + <file>assets/pages/skewers.html</file> + <file>assets/pages/soup.html</file> + <file>assets/pages/steak.html</file> + </qresource> +</RCC> diff --git a/examples/webenginewidgets/recipebrowser/stylesheetdialog.cpp b/examples/webenginewidgets/recipebrowser/stylesheetdialog.cpp new file mode 100644 index 000000000..2137617c3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.cpp @@ -0,0 +1,129 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "mainwindow.h" +#include "stylesheetdialog.h" +#include "ui_stylesheetdialog.h" + +StylesheetDialog::StylesheetDialog(QWidget *parent) : QDialog(parent), ui(new Ui::StylesheetDialog) +{ + ui->setupUi(this); + + connect(ui->styleSheetList, &QListWidget::currentItemChanged, this, + &StylesheetDialog::currentStyleSheetChanged); + connect(ui->styleSheetList, &QListWidget::itemClicked, this, + &StylesheetDialog::listItemClicked); + connect(ui->fileNameEdit, &QLineEdit::textChanged, this, &StylesheetDialog::fileNameChanged); + + connect(ui->addButton, &QPushButton::clicked, this, &StylesheetDialog::addButtonClicked); + connect(ui->removeButton, &QPushButton::clicked, this, &StylesheetDialog::removeButtonClicked); + + QSettings settings; + settings.beginGroup("styleSheets"); + for (const auto &name : settings.allKeys()) { + QListWidgetItem *listItem = new QListWidgetItem(name, ui->styleSheetList); + listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable); + bool checked = settings.value(name).value<StyleSheet>().second; + listItem->setCheckState(checked ? Qt::Checked : Qt::Unchecked); + } + settings.endGroup(); +} + +StylesheetDialog::~StylesheetDialog() +{ + delete ui; +} + +void StylesheetDialog::currentStyleSheetChanged(QListWidgetItem *current, QListWidgetItem *previous) +{ + if (!previous) { + // Select the first item on startup + ui->styleSheetList->setCurrentItem(current); + } + + if (!current) { + ui->fileNameEdit->setText(QString()); + ui->sourceCodeEdit->setPlainText(QString()); + return; + } + + QSettings settings; + settings.beginGroup("styleSheets"); + ui->fileNameEdit->setText(current->text()); + const QString source = settings.value(current->text()).value<StyleSheet>().first; + ui->sourceCodeEdit->setPlainText(source); + settings.endGroup(); +} + +void StylesheetDialog::listItemClicked(QListWidgetItem *item) +{ + MainWindow *window = static_cast<MainWindow *>(parent()); + const QString name = item->text(); + bool checkedStateChanged = (item->checkState() == Qt::Checked && !window->hasStyleSheet(name)) + || (item->checkState() == Qt::Unchecked && window->hasStyleSheet(name)); + if (!checkedStateChanged) + return; + + QSettings settings; + settings.beginGroup("styleSheets"); + const QString source = settings.value(name).value<StyleSheet>().first; + + if (item->checkState() == Qt::Checked) { + settings.setValue(name, QVariant::fromValue(qMakePair(source, true))); + window->insertStyleSheet(name, source, true); + } else { + settings.setValue(name, QVariant::fromValue(qMakePair(source, false))); + window->removeStyleSheet(name, true); + } + + settings.endGroup(); +} + +void StylesheetDialog::fileNameChanged(const QString &text) +{ + QList<QListWidgetItem *> items = ui->styleSheetList->findItems(text, Qt::MatchFixedString); + if (items.size()) + ui->addButton->setEnabled(false); + else + ui->addButton->setEnabled(true); +} + +void StylesheetDialog::addButtonClicked() +{ + const QString name = ui->fileNameEdit->text(); + const QString source = ui->sourceCodeEdit->toPlainText(); + if (name.isEmpty() || source.isEmpty()) + return; + + QListWidgetItem *listItem = new QListWidgetItem(ui->fileNameEdit->text(), ui->styleSheetList); + listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable); + listItem->setCheckState(Qt::Checked); + + MainWindow *window = static_cast<MainWindow *>(parent()); + window->insertStyleSheet(name, source, true); + + QSettings settings; + settings.beginGroup("styleSheets"); + settings.setValue(name, QVariant::fromValue(qMakePair(source, true))); + settings.endGroup(); + + ui->addButton->setEnabled(false); +} + +void StylesheetDialog::removeButtonClicked() +{ + if (ui->styleSheetList->selectedItems().isEmpty()) + return; + + MainWindow *window = static_cast<MainWindow *>(parent()); + QSettings settings; + settings.beginGroup("styleSheets"); + + QListWidgetItem *item = ui->styleSheetList->selectedItems().first(); + const QString name = item->text(); + window->removeStyleSheet(name, true); + settings.remove(name); + delete item; + + settings.endGroup(); +} diff --git a/examples/webenginewidgets/recipebrowser/stylesheetdialog.h b/examples/webenginewidgets/recipebrowser/stylesheetdialog.h new file mode 100644 index 000000000..ca1b4ae99 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.h @@ -0,0 +1,39 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#ifndef STYLESHEETDIALOG_H +#define STYLESHEETDIALOG_H + +#include <QDialog> +#include <QListWidgetItem> + +QT_BEGIN_NAMESPACE +namespace Ui { +class StylesheetDialog; +} +QT_END_NAMESPACE + +typedef QPair<QString, bool> StyleSheet; // <source, isEnabled> +Q_DECLARE_METATYPE(StyleSheet); + +class StylesheetDialog : public QDialog +{ + Q_OBJECT + +public: + explicit StylesheetDialog(QWidget *parent = 0); + ~StylesheetDialog(); + +private slots: + void currentStyleSheetChanged(QListWidgetItem *current, QListWidgetItem *previous); + void listItemClicked(QListWidgetItem *item); + void fileNameChanged(const QString &text); + + void addButtonClicked(); + void removeButtonClicked(); + +private: + Ui::StylesheetDialog *ui; +}; + +#endif // STYLESHEETDIALOG_H diff --git a/examples/webenginewidgets/recipebrowser/stylesheetdialog.ui b/examples/webenginewidgets/recipebrowser/stylesheetdialog.ui new file mode 100644 index 000000000..19db267e8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.ui @@ -0,0 +1,122 @@ +<?xml version="1.0" encoding="UTF-8"?> +<ui version="4.0"> + <class>StylesheetDialog</class> + <widget class="QDialog" name="StylesheetDialog"> + <property name="windowModality"> + <enum>Qt::ApplicationModal</enum> + </property> + <property name="windowTitle"> + <string>Stylesheets</string> + </property> + <property name="modal"> + <bool>true</bool> + </property> + <layout class="QGridLayout" name="gridLayout_2"> + <item row="3" column="1"> + <widget class="QDialogButtonBox" name="buttonBox"> + <property name="orientation"> + <enum>Qt::Horizontal</enum> + </property> + <property name="standardButtons"> + <set>QDialogButtonBox::Cancel|QDialogButtonBox::Ok</set> + </property> + </widget> + </item> + <item row="0" column="0" rowspan="3"> + <widget class="QListWidget" name="styleSheetList"/> + </item> + <item row="0" column="1" rowspan="3"> + <widget class="QFrame" name="frame"> + <property name="frameShape"> + <enum>QFrame::StyledPanel</enum> + </property> + <property name="frameShadow"> + <enum>QFrame::Plain</enum> + </property> + <layout class="QGridLayout" name="gridLayout"> + <item row="0" column="0"> + <widget class="QLabel" name="fileNameLabel"> + <property name="text"> + <string>Stylesheet name:</string> + </property> + </widget> + </item> + <item row="0" column="1"> + <widget class="QLineEdit" name="fileNameEdit"/> + </item> + <item row="1" column="0"> + <widget class="QLabel" name="sourceLabel"> + <property name="text"> + <string>Source code:</string> + </property> + </widget> + </item> + <item row="2" column="0" colspan="2"> + <widget class="QPlainTextEdit" name="sourceCodeEdit"> + <property name="font"> + <font> + <family>Courier New</family> + <pointsize>10</pointsize> + </font> + </property> + </widget> + </item> + <item row="3" column="0" colspan="2"> + <layout class="QHBoxLayout" name="horizontalLayout"> + <item> + <widget class="QPushButton" name="addButton"> + <property name="text"> + <string>Add</string> + </property> + </widget> + </item> + <item> + <widget class="QPushButton" name="removeButton"> + <property name="text"> + <string>Remove</string> + </property> + </widget> + </item> + </layout> + </item> + </layout> + </widget> + </item> + </layout> + </widget> + <resources/> + <connections> + <connection> + <sender>buttonBox</sender> + <signal>accepted()</signal> + <receiver>StylesheetDialog</receiver> + <slot>accept()</slot> + <hints> + <hint type="sourcelabel"> + <x>248</x> + <y>254</y> + </hint> + <hint type="destinationlabel"> + <x>157</x> + <y>274</y> + </hint> + </hints> + </connection> + <connection> + <sender>buttonBox</sender> + <signal>rejected()</signal> + <receiver>StylesheetDialog</receiver> + <slot>reject()</slot> + <hints> + <hint type="sourcelabel"> + <x>316</x> + <y>260</y> + </hint> + <hint type="destinationlabel"> + <x>286</x> + <y>274</y> + </hint> + </hints> + </connection> + </connections> +</ui> |
