ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add tab shortcut and better resulting selection ranges

Browse Source
This commit is contained in:
keyan 2023-06-19 13:07:06 -05:00
parent b427c921d1
commit f8724f75e7
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/form.js
View File

@ -140,6 +140,10 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
e.preventDefault() e.preventDefault()
insertMarkdownItalicFormatting(innerRef.current, helpers.setValue, setSelectionRange) insertMarkdownItalicFormatting(innerRef.current, helpers.setValue, setSelectionRange)
} }
if (e.key === 'Tab' && e.altKey) {
e.preventDefault()
insertMarkdownTabFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
} }
if (onKeyDown) onKeyDown(e) if (onKeyDown) onKeyDown(e)
@ -160,9 +164,7 @@ function insertMarkdownFormatting (replaceFn, selectFn) {
return function (input, setValue, setSelectionRange) { return function (input, setValue, setSelectionRange) {
const start = input.selectionStart const start = input.selectionStart
const end = input.selectionEnd const end = input.selectionEnd
const highlight = start !== end
const val = input.value const val = input.value
if (!highlight) return
const selectedText = val.substring(start, end) const selectedText = val.substring(start, end)
const mdFormatted = replaceFn(selectedText) const mdFormatted = replaceFn(selectedText)
const newVal = val.substring(0, start) + mdFormatted + val.substring(end) const newVal = val.substring(0, start) + mdFormatted + val.substring(end)
@ -171,16 +173,29 @@ function insertMarkdownFormatting (replaceFn, selectFn) {
document.execCommand('insertText', false, mdFormatted) document.execCommand('insertText', false, mdFormatted)
// see https://github.com/facebook/react/issues/6483 // see https://github.com/facebook/react/issues/6483
// for why we don't use `input.setSelectionRange` directly (hint: event order) // for why we don't use `input.setSelectionRange` directly (hint: event order)
setSelectionRange(selectFn ? selectFn(start, mdFormatted) : { start: start + mdFormatted.length, end: start + mdFormatted.length }) setSelectionRange(selectFn ? selectFn(start, end, mdFormatted) : { start: start + mdFormatted.length, end: start + mdFormatted.length })
} }
} }
const insertMarkdownTabFormatting = insertMarkdownFormatting(
val => `\t${val}`,
(start, end, mdFormatted) => ({ start: start + 1, end: end + 1 }) // move inside tab
)
const insertMarkdownLinkFormatting = insertMarkdownFormatting( const insertMarkdownLinkFormatting = insertMarkdownFormatting(
val => `[${val}](url)`, val => `[${val}](url)`,
(start, mdFormatted) => ({ start: start + mdFormatted.length - 4, end: start + mdFormatted.length - 1 }) (start, end, mdFormatted) => (
start === end
? { start: start + 1, end: end + 1 } // move inside brackets
: { start: start + mdFormatted.length - 4, end: start + mdFormatted.length - 1 }) // move to select url part
)
const insertMarkdownBoldFormatting = insertMarkdownFormatting(
val => `**${val}**`,
(start, end, mdFormatted) => ({ start: start + 2, end: end + 2 }) // move inside bold
)
const insertMarkdownItalicFormatting = insertMarkdownFormatting(
val => `_${val}_`,
(start, end, mdFormatted) => ({ start: start + 1, end: end + 1 }) // move inside italic
) )
const insertMarkdownBoldFormatting = insertMarkdownFormatting(val => `**${val}**`)
const insertMarkdownItalicFormatting = insertMarkdownFormatting(val => `_${val}_`)
function FormGroup ({ className, label, children }) { function FormGroup ({ className, label, children }) {
return ( return (