Skip to content

Commit

Permalink
主题css代码调整
Browse files Browse the repository at this point in the history
  • Loading branch information
caol64 committed Dec 2, 2024
1 parent 1475a1f commit ca817dd
Show file tree
Hide file tree
Showing 19 changed files with 431 additions and 505 deletions.
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"printWidth": 128,
"tabWidth": 4
}
27 changes: 0 additions & 27 deletions WenYan/Commons.swift
Original file line number Diff line number Diff line change
Expand Up @@ -150,30 +150,3 @@ extension UTType {
UTType(importedAs: "com.yztech.WenYan.stylesheet")
}
}

func cssParser(css: String) throws -> String? {
let context = JSContext()
var caughtException: AppError?

context?.exceptionHandler = { context, exception in
let errorMessage = exception?.toString() ?? "Unknown JavaScript error."
caughtException = AppError.bizError(description: errorMessage)
}

let csstreeCode = try loadFileFromResource(forResource: "csstree/csstree", withExtension: "js")
context?.evaluateScript(csstreeCode)
let handlerCode = try loadFileFromResource(forResource: "csstree/handler", withExtension: "js")
context?.evaluateScript(handlerCode)

if let parseCssFunction = context?.objectForKeyedSubscript("parseCss") {
let result = parseCssFunction.call(withArguments: [css, 1])
return result?.toString()
}

if let error = caughtException {
throw error
}

throw AppError.bizError(description: "cssParser Unknown error.")

}
3 changes: 1 addition & 2 deletions WenYan/ContentView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -426,11 +426,10 @@ struct ContentView: View {
let gotAccess = file.startAccessingSecurityScopedResource()
if !gotAccess { return }
do {
cssEditorViewModel.content = try cssParser(css: try String(contentsOfFile: file.path, encoding: .utf8)) ?? ""
cssEditorViewModel.loadCss(css: try String(contentsOfFile: file.path, encoding: .utf8))
} catch {
appState.appError = AppError.bizError(description: error.localizedDescription)
}
cssEditorViewModel.setContent()
file.stopAccessingSecurityScopedResource()
case .failure(let error):
appState.appError = AppError.bizError(description: error.localizedDescription)
Expand Down
8 changes: 6 additions & 2 deletions WenYan/CssEditorView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ extension CssEditorViewModel {

func loadIndex() {
do {
let html = try loadFileFromResource(forResource: "codemirror/index", withExtension: "html")
webView?.loadHTMLString(html.replacingOccurrences(of: "mode: \"text/markdown\"", with: "mode: \"text/css\""), baseURL: getResourceBundle())
let html = try loadFileFromResource(forResource: "codemirror/css_editor", withExtension: "html")
webView?.loadHTMLString(html, baseURL: getResourceBundle())
} catch {
appState.appError = AppError.bizError(description: error.localizedDescription)
}
Expand All @@ -95,6 +95,10 @@ extension CssEditorViewModel {
callJavascript(javascriptString: "setContent(\(content.toJavaScriptString()));")
}

func loadCss(css: String) {
callJavascript(javascriptString: "loadCss(\(css.toJavaScriptString()));")
}

private func callJavascript(javascriptString: String, callback: JavascriptCallback? = nil) {
WenYan.callJavascript(webView: webView, javascriptString: javascriptString, callback: callback)
}
Expand Down
89 changes: 89 additions & 0 deletions WenYan/Resources.bundle/codemirror/css_editor.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/lib/codemirror.js"></script>

<link rel="stylesheet" href="codemirror/theme/base16-light.css">

<script src="codemirror/modes/css/css.js"></script>
<script src="csstree/csstree.js"></script>
<script src="csstree/handler.js"></script>
<script src="prettier/prettier.min.js"></script>
<script src="prettier/postcss.js"></script>
</head>
<body>
<script>

CodeMirror.keyMap["default"]["Cmd-/"] = "toggleComment"; // Add-on
let isScrollingFromScript = false;
var editor = CodeMirror(document.body, {
lineNumbers: false,
autofocus: true,
mode: "text/css",
theme: "base16-light",
showInvisibles: false,
maxInvisibles: 16,
autoCloseTags: true,
smartIndent: true,
tabSize: 2,
indentUnit: 2,
lineWrapping: true,
readOnly: false,
autoCloseBrackets: true,
selectionPointer: true,
extraKeys: {
"Cmd-F": "findPersistent",
"Ctrl-Space": "autocomplete",
"Ctrl-I": "indentAuto"
},
styleActiveLine: true
});
editor.on("change", function(instance, change) {
var content = getContent();
window.webkit.messageHandlers.contentChangeHandler.postMessage(content);
});

function setTabInsertSpaces(flag) {
// See http://codemirror.net/doc/manual.html#keymaps
if (flag) {
CodeMirror.keyMap["basic"]["Tab"] = function(cm) {
var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
cm.replaceSelection(spaces, "end", "+input");
};
} else {
CodeMirror.keyMap["basic"]["Tab"] = "defaultTab";
}
}

function setContent(content) {
editor.doc.setValue(content);
editor.doc.clearHistory();
editor.doc.markClean();
}

async function loadCss(css) {
const result = parseCss(css, 1);
const formattedCss = await prettier.format(result, {
parser: "css",
plugins: prettierPlugins,
printWidth: 128,
tabWidth: 4
});
setContent(formattedCss);
}

function getContent() {
return editor.doc.getValue();
}

setTabInsertSpaces(true);

window.webkit.messageHandlers.loadHandler.postMessage(null);

</script>
</body>
</html>
4 changes: 2 additions & 2 deletions WenYan/Resources.bundle/csstree/handler.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const allowedTypeSelector = ["*", "h1", "h2", "h3", "h4", "h5", "h6", "p", "em", "strong", "ul", "ol", "li", "img", "table", "thead", "th", "td", "tr", "blockquote", "code", "pre", "hr", "a", "span", "del"];
const allowedTypeSelector = ["*", "h1", "h2", "h3", "h4", "h5", "h6", "p", "em", "strong", "ul", "ol", "li", "img", "table", "thead", "tbody", "th", "td", "tr", "blockquote", "code", "pre", "hr", "a", "span", "del"];
const allowedClassSelector = ["footnote", "footnote-num", "footnote-txt"];
const allowedPseudoElement = ["before", "after"];
const allowedPseudoClass = ["root", "nth-child"];
Expand Down Expand Up @@ -137,7 +137,7 @@ function parseCss(css, compatibilityMode) {
node.block.children.prepend(list.createItem({type: "Declaration", property: "content", value: {type: "Value", children: [{type: "String", value: ""}]}}));
}
}
if (node.prelude.children.head.data.children.some(child => child.type === "TypeSelector" && child.name === "img")) {
if (node.prelude.children.head.data.children.some(child => child.type === "TypeSelector" && child.name === "img") && !node.block.children.some(child => child.type === "Declaration" && child.property === "max-width")) {
node.block.children.prepend(list.createItem({type: "Declaration", property: "max-width", value: {type: "Value", children: [{type: "Percentage", value: "100"}]}}));
}
}
Expand Down
54 changes: 54 additions & 0 deletions WenYan/Resources.bundle/prettier/postcss.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions WenYan/Resources.bundle/prettier/version.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
3.4.1
29 changes: 19 additions & 10 deletions WenYan/Resources.bundle/themes/gzh_default.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
/**
* 欢迎使用自定义主题功能,使用教程:
* https://babyno.top/posts/2024/11/wenyan-supports-customized-themes/
*/
/* 全局变量 */
:root {
--sans-serif-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--sans-serif-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--monospace-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "liberation mono", "courier new", monospace;
}
/* 全局属性 */
Expand Down Expand Up @@ -55,12 +60,16 @@
font-weight: bold;
}
/* 三-六级标题 */
#wenyan h3, #wenyan h4, #wenyan h5, #wenyan h6 {
#wenyan h3,
#wenyan h4,
#wenyan h5,
#wenyan h6 {
font-size: 1em;
font-weight: bold;
}
/* 列表 */
#wenyan ul, #wenyan ol {
#wenyan ul,
#wenyan ol {
padding-left: 1.2em;
}
/* 列表元素 */
Expand All @@ -82,14 +91,14 @@
table-layout: fixed;
text-align: left;
overflow: auto;
border: 1px solid #f6f6f6;
display: inline-block;
word-wrap: break-word;
word-break: break-all;
}
/* 表格单元格 */
#wenyan table td, #wenyan table th {
font-size: .75em;
#wenyan table td,
#wenyan table th {
font-size: 0.75em;
height: 40px;
padding: 9px 12px;
line-height: 22px;
Expand All @@ -105,7 +114,7 @@
}
/* 表格斑马条纹效果 */
#wenyan table tr:nth-child(2n) {
background-color: #F8F8F8;
background-color: #f8f8f8;
}
/* 引用块 */
#wenyan blockquote {
Expand All @@ -114,7 +123,7 @@
margin: 1.5em 0;
padding: 0.5em 10px;
font-style: italic;
font-size: .9em;
font-size: 0.9em;
}
/* 引用块前缀 */
#wenyan blockquote::before {
Expand All @@ -127,12 +136,12 @@
font-family: var(--monospace-font);
color: #ff502c;
padding: 4px 6px;
font-size: .78em;
font-size: 0.78em;
}
/* 代码块外围 */
#wenyan pre {
border-radius: 5px;
font-size: .8em;
font-size: 0.8em;
line-height: 2;
margin: 1em 0.5em;
padding: 1em;
Expand Down
38 changes: 29 additions & 9 deletions WenYan/Resources.bundle/themes/juejin_default.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
:root {
--sans-serif-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--monospace-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "liberation mono", "courier new", monospace;
}
#wenyan {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: var(--sans-serif-font);
line-height: 1.75;
}
#wenyan * {
box-sizing: border-box;
}
#wenyan h1, h2, h3, h4, h5, h6, p, pre {
#wenyan h1,
#wenyan h2,
#wenyan h3,
#wenyan h4,
#wenyan h5,
#wenyan h6,
#wenyan p,
#wenyan pre {
margin: 1em 0;
}
#wenyan h1, h2, h3, h4, h5, h6 {
#wenyan h1,
#wenyan h2,
#wenyan h3,
#wenyan h4,
#wenyan h5,
#wenyan h6 {
line-height: 1.5;
margin-top: 35px;
margin-bottom: 10px;
Expand All @@ -29,7 +46,8 @@
font-size: 20px;
line-height: 28px;
}
#wenyan ul, ol {
#wenyan ul,
#wenyan ol {
padding-left: 1.2em;
}
#wenyan li {
Expand All @@ -54,7 +72,8 @@
color: #000;
text-align: left;
}
#wenyan table td, table th {
#wenyan table td,
#wenyan table th {
padding: 12px 7px;
line-height: 24px;
}
Expand All @@ -64,24 +83,25 @@
margin: 22px 0;
border-left: 4px solid #cbcbcb;
background-color: #f8f8f8;
font-size: .95em;
font-size: 0.95em;
}
#wenyan p code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "liberation mono", "courier new", monospace;
font-family: var(--monospace-font);
background: #fff5f5;
color: #ff502c;
padding: 4px 6px;
font-size: .78em;
font-size: 0.78em;
}
#wenyan pre {
font-size: .95em;
font-size: 0.95em;
line-height: 1.5;
margin: 1em 0.5em;
padding: 1em;
color: #333;
background: #f8f8f8;
}
#wenyan pre code {
font-family: var(--monospace-font);
display: block;
overflow-x: auto;
margin: 0;
Expand Down
Loading

0 comments on commit ca817dd

Please sign in to comment.