Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sethyuan/logseq-plugin-wrap
Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.
https://github.com/sethyuan/logseq-plugin-wrap
Last synced: 3 months ago
JSON representation
Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.
- Host: GitHub
- URL: https://github.com/sethyuan/logseq-plugin-wrap
- Owner: sethyuan
- License: mit
- Created: 2022-01-25T08:41:35.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-11T07:13:19.000Z (10 months ago)
- Last Synced: 2024-06-23T10:37:46.666Z (5 months ago)
- Language: JavaScript
- Size: 1.96 MB
- Stars: 105
- Watchers: 4
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
- popular-dependents-lists - sethyuan/logseq-plugin-wrap - π 49 (Rambdax / sethyuan/logseq-plugin-wrap)
README
[δΈζ](README.md) | English
# logseq-plugin-wrap
Create your own wrappings/replacements with optional key bindings for selected text. A set of useful defaults is also provided.
## Usage
https://user-images.githubusercontent.com/3410293/234194368-cd438917-e6d4-47f4-bd74-9208baed2575.mp4
## User configs
```json
{
"disabled": false,
"toolbar": true,
"toolbarShortcut": "",
"group-ref": {
"wrap-pageref": {
"label": "Page ref",
"binding": "",
"template": "[[$^]]",
"icon": ""
},
"wrap-link": {
"label": "Link",
"binding": "",
"template": "[$^]()",
"icon": ""
},
"wrap-annotate": {
"label": "Annotate",
"binding": "",
"pluginCommand": "logseq-long-form.models.createMetaBlock",
"template": "[$^]((($%)))",
"icon": ""
}
},
"group-semantic": {
"wrap-code": {
"label": "Inline code",
"binding": "",
"template": "`$^`",
"icon": "`"
},
"wrap-caption": {
"label": "Caption",
"binding": "",
"template": "[[#caption]]==$^==",
"icon": ""
}
},
"group-style": {
"wrap-bold": {
"label": "Bold",
"binding": "",
"template": "**$^**",
"icon": ""
},
"wrap-italic": {
"label": "Italic",
"binding": "",
"template": "*$^*",
"icon": ""
},
"wrap-strike-through": {
"label": "Strike through",
"binding": "",
"template": "~~$^~~",
"icon": ""
},
"wrap-math": {
"label": "Math expression",
"binding": "",
"template": "$$^$",
"icon": ""
}
},
"group-hl": {
"wrap-yellow-hl": {
"label": "Highlight",
"binding": "",
"template": "==$^==",
"icon": ""
},
"wrap-red-hl": {
"label": "Red highlight",
"binding": "",
"template": "[[#red]]==$^==",
"icon": ""
},
"wrap-green-hl": {
"label": "Green highlight",
"binding": "",
"template": "[[#green]]==$^==",
"icon": ""
},
"wrap-blue-hl": {
"label": "Blue highlight",
"binding": "",
"template": "[[#blue]]==$^==",
"icon": ""
}
},
"group-underline": {
"wrap-red-underline": {
"label": "Red underline",
"binding": "",
"template": "[[_red]]==$^==",
"icon": ""
},
"wrap-green-underline": {
"label": "Green underline",
"binding": "",
"template": "[[_green]]==$^==",
"icon": ""
},
"wrap-blue-underline": {
"label": "Blue underline",
"binding": "",
"template": "[[_blue]]==$^==",
"icon": ""
}
},
"group-text": {
"wrap-red-text": {
"label": "Red text",
"binding": "",
"template": "[[$red]]==$^==",
"icon": ""
},
"wrap-green-text": {
"label": "Green text",
"binding": "",
"template": "[[$green]]==$^==",
"icon": ""
},
"wrap-blue-text": {
"label": "Blue text",
"binding": "",
"template": "[[$blue]]==$^==",
"icon": ""
}
},
"group-cloze": {
"wrap-cloze": {
"label": "Cloze",
"binding": "",
"template": " {{cloze $^}}",
"icon": ""
},
"wrap-cloze2": {
"label": "Hidden text",
"binding": "",
"template": "[[#cloze]]==$^==",
"icon": ""
}
},
"repl-clear": {
"label": "Remove formatting",
"binding": "mod+shift+x",
"regex": "\\[\\[(?:#|\\$)(?:red|green|blue|cloze)\\]\\]|==([^=]*)==|~~([^~]*)~~|\\^\\^([^\\^]*)\\^\\^|\\*\\*([^\\*]*)\\*\\*|\\*([^\\*]*)\\*|_([^_]*)_|\\$([^\\$]*)\\$|`([^`]*)`|\\[([^\\]]*)\\]\\([^\\]]*\\)",
"replacement": "$1$2$3$4$5$6$7$8$9",
"icon": ""
}
}
```
There are a couple of user settings available when you access the plugin settings from Logseq's plugins page. Please refer to the source block above (Default values are given in the source block).
- `toolbar`: You can set it to `false` if you don't want to use the toolbar.
- `toolbarShortcut`: An optional shortcut to toggle the toolbar visibility.
- `wrap-*`: Your custom wrappings are defined here. You can extend default wrappings and/or replace/remove them. Please refer to the above configuration for how to define wrappings. `binding` should be unique, `template` defines how you want the selected text to be wrapped, `$^` represents the selected text. You can run a plugin command via `pluginCommand` and its result is represented by `$%`.
- `repl-*`: Your custom replacements are defined here. You can extend default replacements and/or replace/remove them. Please refer to the above configuration for how to define replacements. `binding` should be unique, `regex` is the regular expression used to match text that you want to replace to, `replacement` defines what to replace the match with.
- `group-*`: You can combine multiple commands into a same group using this setting (They'll show together in the toolbar).
## Toolbar style customization
Please refer to the following example:
```css
/* Toolbar's background color */
:root {
--kef-wrap-tb-bg: #333e;
}
:root.dark {
--kef-wrap-tb-bg: #777e;
}
/* Here goes styles for the toolbar itself */
#kef-wrap-toolbar {
background: #333;
}
/* Here goes styles for toolbar buttons */
.kef-wrap-tb-item {
}
/* Here goes styles for toolbar buttons when hovered */
.kef-wrap-tb-item:hover {
filter: drop-shadow(0 0 3px #fff);
}
/* Here you can define styles for the svg icon */
.kef-wrap-tb-item img {
width: 20px;
height: 20px;
}
```
Builtin styles for highlight and text color is as follows:
```css
mark {
background: #fef3ac !important;
color: #262626 !important;
}
span[data-ref="#red"],
span[data-ref="#green"],
span[data-ref="#blue"],
span[data-ref="$red"],
span[data-ref="$green"],
span[data-ref="$blue"],
span[data-ref="_red"],
span[data-ref="_green"],
span[data-ref="_blue"] {
display: none;
}
span[data-ref="#red"] + mark {
background: #ffc7c7 !important;
color: #262626 !important;
}
span[data-ref="#green"] + mark {
background: #ccffc1 !important;
color: #262626 !important;
}
span[data-ref="#blue"] + mark {
background: #abdfff !important;
color: #262626 !important;
}
span[data-ref="_red"] + mark {
text-decoration: underline 2px solid #e20f0f !important;
text-underline-position: under !important;
text-underline-offset: 3px;
padding: 0;
border-radius: 0;
background: unset !important;
color: unset !important;
}
span[data-ref="_green"] + mark {
text-decoration: underline 2px solid #1ac407 !important;
text-underline-position: under !important;
text-underline-offset: 3px;
padding: 0;
border-radius: 0;
background: unset !important;
color: unset !important;
}
span[data-ref="_blue"] + mark {
text-decoration: underline 2px solid #0764c4 !important;
text-underline-position: under !important;
text-underline-offset: 3px;
padding: 0;
border-radius: 0;
background: unset !important;
color: unset !important;
}
span[data-ref="$red"] + mark {
color: #f00 !important;
background: unset !important;
padding: 0;
border-radius: 0;
}
span[data-ref="$green"] + mark {
color: #0f0 !important;
background: unset !important;
padding: 0;
border-radius: 0;
}
span[data-ref="$blue"] + mark {
color: #00f !important;
background: unset !important;
padding: 0;
border-radius: 0;
}
```
## About builtin "Remove formatting"
Due to technical reason, nested formatting is not cleared completely, you can try to perform multiple removings in this case.
## Buy me a coffee
If you think the software I have developed is helpful to you and would like to give recognition and support, you may buy me a coffee using following link. Thank you for your support and attention.
