Customize background color, text color and font
Closed this issue · 6 comments
Is there a way to customize the backgroundColor, textColor and font of the text when using the MarkupEditorView? Can it be done using any of the existing delegate methods?
You would need to do this by modifying MarkupEditor/Resources/markup.css. If you want to change them dynamically, you could implement a call to the JavaScript side as is done in MarkupWKWebView to do the equivalent style change. The Swift functions that invoke evaluateJavaScript in turn invoke the JavaScript MU.<function name> in MarkupEditor/Resources/markup.js. Hopefully those should give you a reasonable template if you have not done this type of thing before. In case it’s relevant, on font size, see #114, which I haven’t done yet but will be doing relatively soon, I hope.
Thanks a lot for the detailed response! I need to set the font and text color dynamically so I'll look into the JavaScript functions. For the background, I was just looking to set it to .clear. Is there an existing way to do that or should I look into creating a JS function as well?
Thanks again for the tips. Was able to get all three working for my use-case so posting the solution here in case someone else is looking.
markup.js (needed it for the whole body but i'm sure it could work for selection logic as well)
MU.changeFont = function(fontName) {
// Change font for whole body
document.body.style.fontFamily = fontName; // Add custom font URLs in markup.html <head>
_callback('input');
};
MU.changeColor = function(color) {
// Change color for whole body
document.body.style.color = color
_callback('input');
}
MarkupWKWebView.swift
public func changeColor(colorName: String, handler: (()->Void)? = nil) {
evaluateJavaScript("MU.changeColor('\(colorName)')") { result, error in
handler?()
}
}
public func changeFont(fontName: String, handler: (()->Void)? = nil) {
evaluateJavaScript("MU.changeFont('\(fontName)')") { result, error in
handler?()
}
}
In my SwiftUI View
extension DetailView: MarkupDelegate {
func markupDidLoad(_ view: MarkupWKWebView, handler: (()->Void)?) {
// clear background
view.isOpaque = false
view.backgroundColor = .clear
view.changeColor(colorName: hexColorString)
view.changeFont(fontName: cssFontNameString)
// default code
}
}
Amazing library btw, thanks for creating it 🙏
Thanks very much for posting your solution. I will come back and see about folding this in when I do the work to sort out #114 .
@stevengharris Was this ever implemented so I can use a custom font?