Skip to content

Commit

Permalink
feat: add .markdownStyle() options.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Mar 11, 2022
1 parent c3184fa commit a7c3c9c
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 11 deletions.
6 changes: 6 additions & 0 deletions Example/Example.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
objects = {

/* Begin PBXBuildFile section */
7D025D0127DB47620057979B /* MarkdownStyleGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D025D0027DB47620057979B /* MarkdownStyleGroup.swift */; };
7D025D0227DB47620057979B /* MarkdownStyleGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D025D0027DB47620057979B /* MarkdownStyleGroup.swift */; };
7D6033B627DAE4DD00F7B36B /* DemoList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D6033B527DAE4DD00F7B36B /* DemoList.swift */; };
7D6033B727DAE4DD00F7B36B /* DemoList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D6033B527DAE4DD00F7B36B /* DemoList.swift */; };
7D6033B927DAE5DC00F7B36B /* DemoRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7D6033B827DAE5DC00F7B36B /* DemoRow.swift */; };
Expand All @@ -29,6 +31,7 @@
/* End PBXBuildFile section */

/* Begin PBXFileReference section */
7D025D0027DB47620057979B /* MarkdownStyleGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MarkdownStyleGroup.swift; sourceTree = "<group>"; };
7D6033B527DAE4DD00F7B36B /* DemoList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DemoList.swift; sourceTree = "<group>"; };
7D6033B827DAE5DC00F7B36B /* DemoRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DemoRow.swift; sourceTree = "<group>"; };
7D6033BF27DAEB7E00F7B36B /* CodeGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodeGroup.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -71,6 +74,7 @@
7D6033C227DAF08000F7B36B /* HomeGroup.swift */,
7D6033C527DAF1D900F7B36B /* BaseMarkdownGroup.swift */,
7D6033C827DB2A4A00F7B36B /* ToDoGroup.swift */,
7D025D0027DB47620057979B /* MarkdownStyleGroup.swift */,
);
path = Group;
sourceTree = "<group>";
Expand Down Expand Up @@ -235,6 +239,7 @@
buildActionMask = 2147483647;
files = (
7D6033C927DB2A4A00F7B36B /* ToDoGroup.swift in Sources */,
7D025D0127DB47620057979B /* MarkdownStyleGroup.swift in Sources */,
7D6033C627DAF1D900F7B36B /* BaseMarkdownGroup.swift in Sources */,
7D6033C027DAEB7E00F7B36B /* CodeGroup.swift in Sources */,
7D6033C327DAF08000F7B36B /* HomeGroup.swift in Sources */,
Expand All @@ -249,6 +254,7 @@
buildActionMask = 2147483647;
files = (
7D6033CA27DB2A4B00F7B36B /* ToDoGroup.swift in Sources */,
7D025D0227DB47620057979B /* MarkdownStyleGroup.swift in Sources */,
7D6033C727DAF1D900F7B36B /* BaseMarkdownGroup.swift in Sources */,
7D6033C127DAEB7E00F7B36B /* CodeGroup.swift in Sources */,
7D6033C427DAF08000F7B36B /* HomeGroup.swift in Sources */,
Expand Down
12 changes: 10 additions & 2 deletions Example/Shared/DemoList.swift
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,20 @@ struct DemoList: View {
DemoRow(title: "Base Markdown", systemImage: "doc.text.image", tag: "Base Markdown", selection: $selection) {
BaseMarkdownGroup()
}
DemoRow(title: "Code Block", systemImage: "chevron.left.forwardslash.chevron.right", tag: "Code Block", selection: $selection) {
DemoRow(title: "Code Block", systemImage: "slider.horizontal.below.rectangle", tag: "Code Block", selection: $selection) {
CodeGroup()
}
DemoRow(title: "ToDo", systemImage: "chevron.left.forwardslash.chevron.right", tag: "ToDo", selection: $selection) {
DemoRow(title: "ToDo", systemImage: "text.badge.checkmark", tag: "ToDo", selection: $selection) {
ToDoGroup()
}
DemoRow(
title: "markdownStyle",
systemImage: "chevron.left.forwardslash.chevron.right",
tag: "markdownStyle",
selection: $selection
) {
MarkdownStyleGroup()
}
}
}
}
Expand Down
71 changes: 71 additions & 0 deletions Example/Shared/Group/MarkdownStyleGroup.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
//
// PaddingGroup.swift
// Example
//
// Created by 王楚江 on 2022/3/11.
//

import Markdown
import SwiftUI

struct MarkdownStyleGroup: View {
@State private var mdStr: String = """
.markdownStyle()
===
Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.
## Usage
```swift
Markdown(content: $mdStr)
.markdownStyle(
MarkdownStyle(
padding: 0, paddingTop: 115, paddingBottom: 2, paddingLeft: 130, paddingRight: 5
)
)
```
```swift
Markdown(content: $mdStr)
.markdownStyle(MarkdownStyle(padding: 35 ))
```
## `.markdownStyle()`
```swift
import SwiftUI
import Markdown
struct ContentView: View {
@State private var mdStr: String = \"\""
## Hello World
Render Markdown text in SwiftUI.
\"\""
var body: some View {
VStack {
Markdown(content: $mdStr)
.markdownStyle(
MarkdownStyle(padding: 0, paddingTop: 115, paddingBottom: 2, paddingLeft: 130, paddingRight: 5)
)
}
}
}
```
## License
Licensed under the MIT License.
"""
var body: some View {
Markdown(content: $mdStr)
// .markdownStyle(MarkdownStyle(padding: 90))
.markdownStyle(MarkdownStyle(
paddingTop: 100, paddingBottom: 55, paddingLeft: 88, paddingRight: 23
))

// .markdownStyle(MarkdownStyle(padding: 0, paddingTop: 115, paddingBottom: 2, paddingLeft: 130, paddingRight: 5))
}
}
20 changes: 19 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Markdown

Render Markdown text in SwiftUI. It is a preview based on the [`Marked`](https://github.com/markedjs/marked) implementation.

![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157746319-d338670c-e4b2-471b-b524-0e9ecb8d2c52.png)
![Markdown Package Screenshot](https://user-images.githubusercontent.com/1680273/157866748-911e038b-c845-4da9-9ae2-1499a1cb0b93.png)

## Installation

Expand Down Expand Up @@ -45,6 +45,24 @@ struct ContentView: View {
}
```

### `.markdownStyle()`

Setting markdown related styles.

```swift
Markdown(content: $mdStr)
.markdownStyle(
MarkdownStyle(
padding: 0, paddingTop: 115, paddingBottom: 2, paddingLeft: 130, paddingRight: 5
)
)
```

```swift
Markdown(content: $mdStr)
.markdownStyle(MarkdownStyle(padding: 35 ))
```

## License

Licensed under the MIT License.
38 changes: 37 additions & 1 deletion Sources/Markdown/Markdown.swift
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ public struct Markdown: ViewRepresentable {

@Binding var content: String
@Environment(\.colorScheme) var colorScheme
@Environment(\.markdownStyle) private var style: MarkdownStyle
var textDidChanged: ((String) -> Void)?
var theme: ColorScheme?

public init(content: Binding<String>) {
self._content = content
self.theme = colorScheme
}
public init(content: Binding<String>, theme: ColorScheme) {
public init(content: Binding<String>, theme: ColorScheme?) {
self._content = content
self.theme = theme
}
Expand All @@ -31,6 +32,21 @@ public struct Markdown: ViewRepresentable {
private func getWebView(context: Context) -> MarkdownWebView {
let codeView = MarkdownWebView()
codeView.setContent(content)
if (style.padding != nil) {
codeView.setPadding(style.padding!)
}
if (style.paddingTop != nil) {
codeView.setPaddingTop(style.paddingTop!)
}
if (style.paddingBottom != nil) {
codeView.setPaddingBottom(style.paddingBottom!)
}
if (style.paddingLeft != nil) {
codeView.setPaddingLeft(style.paddingLeft!)
}
if (style.paddingRight != nil) {
codeView.setPaddingRight(style.paddingRight!)
}
codeView.textDidChanged = { text in
context.coordinator.set(content: text)
}
Expand Down Expand Up @@ -63,6 +79,13 @@ public struct Markdown: ViewRepresentable {
public func updateUIView(_ webview: MarkdownWebView, context: Context) {
updateView(webview, context: context)
}

}

extension View {
public func markdownStyle(_ markdownStyle: MarkdownStyle) -> some View {
return environment(\.markdownStyle, markdownStyle)
}
}

public extension Markdown {
Expand All @@ -89,6 +112,19 @@ public extension Markdown {
}
}

extension EnvironmentValues {
fileprivate var markdownStyle: MarkdownStyle {
get { self[MarkdownStyleKey.self] }
set {
self[MarkdownStyleKey.self] = newValue
}
}
}

private struct MarkdownStyleKey: EnvironmentKey {
static let defaultValue = MarkdownStyle()
}

#if DEBUG
struct Markdown_Previews : PreviewProvider {
static private var jsonString = """
Expand Down
32 changes: 32 additions & 0 deletions Sources/Markdown/MarkdownStyle.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
//
// SwiftUIView.swift
//
//
// Created by 王楚江 on 2022/3/11.
//

import SwiftUI

public struct MarkdownStyle: Hashable {
public var padding: Int?
public var paddingTop: Int?
public var paddingRight: Int?
public var paddingLeft: Int?
public var paddingBottom: Int?
public init(padding: Int = 18) {
self.padding = padding
}
public init(paddingTop: Int = 18, paddingBottom: Int = 18, paddingLeft: Int = 18, paddingRight: Int = 18) {
self.paddingTop = paddingTop
self.paddingBottom = paddingBottom
self.paddingLeft = paddingLeft
self.paddingRight = paddingRight
}
public init(padding: Int = 18, paddingTop: Int = 18, paddingBottom: Int = 18, paddingLeft: Int = 18, paddingRight: Int = 18) {
self.padding = padding
self.paddingTop = paddingTop
self.paddingBottom = paddingBottom
self.paddingLeft = paddingLeft
self.paddingRight = paddingRight
}
}
16 changes: 15 additions & 1 deletion Sources/Markdown/MarkdownWebView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,21 @@ public class MarkdownWebView: CustomView {
callJavascript(javascriptString: "document.body.classList.add('theme-light');")
}
}

func setPadding(_ padding: Int) {
callJavascript(javascriptString: "__markdown_preview__.style.padding = '\(padding)px';")
}
func setPaddingTop(_ top: Int) {
callJavascript(javascriptString: "__markdown_preview__.style.paddingTop = '\(top)px';")
}
func setPaddingBottom(_ bottom: Int) {
callJavascript(javascriptString: "__markdown_preview__.style.paddingBottom = '\(bottom)px';")
}
func setPaddingLeft(_ left: Int) {
callJavascript(javascriptString: "__markdown_preview__.style.paddingLeft = '\(left)px';")
}
func setPaddingRight(_ right: Int) {
callJavascript(javascriptString: "__markdown_preview__.style.paddingRight = '\(right)px';")
}
}


Expand Down
22 changes: 16 additions & 6 deletions Sources/Markdown/Resources/web.bundle/marked.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
#__markdown_preview__ {
body, html {
margin: 0;
padding: 0;
user-select: none;
-webkit-user-select: none;
min-height: 100%;
}

#__markdown_preview__ {
cursor: default;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.markdown {
min-height: 100%;
}

.markdown-body code {
-webkit-user-select: text;
cursor: text;
}

@media (prefers-color-scheme: dark) {
Expand Down

0 comments on commit a7c3c9c

Please sign in to comment.