btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: initial cm-backend envinput implementation

Browse Source
This commit is contained in:
Andrew Bastin
2022-02-01 15:13:29 +05:30
parent fc11cea590
commit 4da3410963
1 changed files with 80 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

554
packages/hoppscotch-app/components/smart/EnvInput.vue
View File

@@ -10,488 +10,94 @@
:placeholder="placeholder"
class="env-input"
:class="styles"
contenteditable="true"
spellcheck="false"
@keydown.enter.prevent="$emit('enter', $event)"
@keyup="$emit('keyup', $event)"
@click="$emit('click', $event)"
@keydown="$emit('keydown', $event)"
@paste="handlePaste"
@compositionend="handleCompositionEnd"
@keydown.enter.prevent="emit('enter', $event)"
@keyup="emit('keyup', $event)"
@click="emit('click', $event)"
@keydown="emit('keydown', $event)"
></div>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import IntervalTree from "node-interval-tree"
import debounce from "lodash/debounce"
import isUndefined from "lodash/isUndefined"
import { tippy } from "vue-tippy"
import * as E from "fp-ts/Either"
import { pipe } from "fp-ts/function"
import { Subject } from "rxjs"
import { aggregateEnvs$ } from "~/newstore/environments"
import { useReadonlyStream } from "~/helpers/utils/composables"
import { parseTemplateStringE } from "~/helpers/templating"
<script setup lang="ts">
import { ref, onMounted, watch } from "@nuxtjs/composition-api"
import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
import { EditorState, Extension } from "@codemirror/state"
import { baseTheme } from "~/helpers/editor/themes/baseTheme"
import { HoppEnvironmentPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
import { useStreamSubscriber } from "~/helpers/utils/composables"
const tagsToReplace = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
const props = withDefaults(
defineProps<{
value: string
placeholder: string
styles: string
}>(),
{
value: "",
placeholder: "",
styles: "",
}
)
const emit = defineEmits<{
(e: "input", data: string): void
(e: "enter", ev: any): void
(e: "keyup", ev: any): void
(e: "keydown", ev: any): void
(e: "click", ev: any): void
}>()
const editor = ref<any | null>(null)
const cachedValue = ref(props.value)
const view = ref<EditorView>()
const { subscribeToStream } = useStreamSubscriber()
const envTooltipPlugin = new HoppEnvironmentPlugin(subscribeToStream, view)
const initView = (el: any) => {
const extensions: Extension = [
baseTheme,
envTooltipPlugin,
ViewPlugin.fromClass(
class {
update(update: ViewUpdate) {
if (update.docChanged) {
cachedValue.value = update.state.doc
.toJSON()
.join(update.state.lineBreak)
emit("input", cachedValue.value)
}
}
}
),
]
view.value = new EditorView({
parent: el,
state: EditorState.create({
doc: props.value,
extensions,
}),
})
}
export default defineComponent({
props: {
value: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
styles: {
type: String,
default: "",
},
},
setup() {
const aggregateEnvs = useReadonlyStream(aggregateEnvs$)
return {
aggregateEnvs,
}
},
data() {
return {
internalValue: "",
htmlOutput: "",
debouncedHandler: null,
highlight: [
{
text: /(<<\w+>>)/g,
style:
"cursor-help transition rounded px-1 focus:outline-none mx-0.5",
},
],
highlightEnabled: true,
highlightStyle: "",
caseSensitive: true,
fireOn: "input",
fireOnEnabled: true,
}
},
onMounted(() => {
if (editor.value) {
if (!view.value) initView(editor.value)
}
})
watch: {
aggregateEnvs() {
this.processHighlights()
},
highlightStyle() {
this.processHighlights()
},
highlight() {
this.processHighlights()
},
value() {
if (this.internalValue !== this.value) {
this.internalValue = this.value
this.processHighlights()
}
},
highlightEnabled() {
this.processHighlights()
},
caseSensitive() {
this.processHighlights()
},
htmlOutput() {
const selection = this.saveSelection(this.$refs.editor)
this.$refs.editor.innerHTML = this.htmlOutput
this.restoreSelection(this.$refs.editor, selection)
},
},
mounted() {
if (this.fireOnEnabled)
this.$refs.editor.addEventListener(this.fireOn, this.handleChange)
this.internalValue = this.value
this.processHighlights()
},
methods: {
handleCompositionEnd() {
this.handleChange()
},
handlePaste(ev) {
this.handleChange()
this.$emit("paste", { event: ev, previousValue: this.internalValue })
},
handleChange(e = null) {
if (e && "inputType" in e && e.inputType === "insertCompositionText") {
return
}
this.debouncedHandler = debounce(function () {
if (this.$refs.editor) {
if (this.internalValue !== this.$refs.editor.textContent) {
this.internalValue = this.$refs.editor.textContent
this.processHighlights()
}
}
}, 5)
this.debouncedHandler()
},
getResultSpan(envVar, highlightPos, position) {
const env = this.aggregateEnvs.find((k) => k.key === envVar)
const envName = env?.sourceEnv ?? "choose an environment"
const value = pipe(
parseTemplateStringE(env?.value ?? "", this.aggregateEnvs),
E.map((value) => value.replace(/"/g, "&quot;"))
)
const isError = env === undefined || E.isLeft(value)
return `<span class="${highlightPos.style} ${
isError
? "bg-red-400 text-red-50 hover:bg-red-600"
: "bg-accentDark text-accentContrast hover:bg-accent"
}" v-tippy data-tippy-content="${envName}<xmp class='${
E.isLeft(value) && value.left === "ENV_EXPAND_LOOP"
? "expand-loop"
: "found"
}'>${
E.isLeft(value) && value.left === "ENV_EXPAND_LOOP"
? this.$t("environment.nested_overflow")
: value.right
}</xmp>">${this.safe_tags_replace(
this.internalValue.substring(position.start, position.end + 1)
)}</span>`
},
processHighlights() {
if (!this.highlightEnabled) {
this.htmlOutput = this.internalValue
if (this.intervalTree !== this.value) {
this.$emit("input", this.internalValue)
this.$emit("change", this.internalValue)
}
return
}
const intervalTree = new IntervalTree()
let highlightPositions = []
const sortedHighlights = this.normalizedHighlights()
if (!sortedHighlights) return
for (let i = 0; i < sortedHighlights.length; i++) {
const highlightObj = sortedHighlights[i]
let indices = []
if (highlightObj.text) {
if (typeof highlightObj.text === "string") {
indices = this.getIndicesOf(
highlightObj.text,
this.internalValue,
isUndefined(highlightObj.caseSensitive)
? this.caseSensitive
: highlightObj.caseSensitive
)
indices.forEach((start) => {
const end = start + highlightObj.text.length - 1
this.insertRange(start, end, highlightObj, intervalTree)
})
}
if (
Object.prototype.toString.call(highlightObj.text) ===
"[object RegExp]"
) {
indices = this.getRegexIndices(
highlightObj.text,
this.internalValue
)
indices.forEach((pair) => {
this.insertRange(pair.start, pair.end, highlightObj, intervalTree)
})
}
}
if (
highlightObj.start !== undefined &&
highlightObj.end !== undefined &&
highlightObj.start < highlightObj.end
) {
const start = highlightObj.start
const end = highlightObj.end - 1
this.insertRange(start, end, highlightObj, intervalTree)
}
}
highlightPositions = intervalTree.search(0, this.internalValue.length)
highlightPositions = highlightPositions.sort((a, b) => a.start - b.start)
let result = ""
let startingPosition = 0
for (let k = 0; k < highlightPositions.length; k++) {
const position = highlightPositions[k]
result += this.safe_tags_replace(
this.internalValue.substring(startingPosition, position.start)
)
const envVar = this.internalValue
.substring(position.start, position.end + 1)
.slice(2, -2)
result += this.getResultSpan(envVar, highlightPositions[k], position)
startingPosition = position.end + 1
}
if (startingPosition < this.internalValue.length)
result += this.safe_tags_replace(
this.internalValue.substring(
startingPosition,
this.internalValue.length
)
)
if (result[result.length - 1] === " ") {
result = result.substring(0, result.length - 1)
result += "&nbsp;"
}
this.htmlOutput = result
this.$nextTick(() => {
this.renderTippy()
})
if (this.internalValue !== this.value) {
this.$emit("input", this.internalValue)
this.$emit("change", this.internalValue)
}
},
renderTippy() {
const tippable = document.querySelectorAll("[v-tippy]")
tippable.forEach((t) => {
tippy(t, {
content: t.dataset["tippy-content"],
theme: "tooltip",
popperOptions: {
modifiers: {
preventOverflow: {
enabled: false,
},
hide: {
enabled: false,
},
},
},
})
})
},
insertRange(start, end, highlightObj, intervalTree) {
const overlap = intervalTree.search(start, end)
const maxLengthOverlap = overlap.reduce((max, o) => {
return Math.max(o.end - o.start, max)
}, 0)
if (overlap.length === 0) {
intervalTree.insert(start, end, {
start,
end,
style: highlightObj.style,
})
} else if (end - start > maxLengthOverlap) {
overlap.forEach((o) => {
intervalTree.remove(o.start, o.end, o)
})
intervalTree.insert(start, end, {
start,
end,
style: highlightObj.style,
})
}
},
normalizedHighlights() {
if (this.highlight == null) return null
if (
Object.prototype.toString.call(this.highlight) === "[object RegExp]" ||
typeof this.highlight === "string"
)
return [{ text: this.highlight }]
if (
Object.prototype.toString.call(this.highlight) === "[object Array]" &&
this.highlight.length > 0
) {
const globalDefaultStyle =
typeof this.highlightStyle === "string"
? this.highlightStyle
: Object.keys(this.highlightStyle)
.map((key) => key + ":" + this.highlightStyle[key])
.join(";") + ";"
const regExpHighlights = this.highlight.filter(
(x) => (x === Object.prototype.toString.call(x)) === "[object RegExp]"
)
const nonRegExpHighlights = this.highlight.filter(
(x) => (x === Object.prototype.toString.call(x)) !== "[object RegExp]"
)
return nonRegExpHighlights
.map((h) => {
if (h.text || typeof h === "string") {
return {
text: h.text || h,
style: h.style || globalDefaultStyle,
caseSensitive: h.caseSensitive,
}
} else if (h.start !== undefined && h.end !== undefined) {
return {
style: h.style || globalDefaultStyle,
start: h.start,
end: h.end,
caseSensitive: h.caseSensitive,
}
} else {
throw new Error(
"Please provide a valid highlight object or string"
)
}
})
.sort((a, b) =>
a.text && b.text
? a.text > b.text
: a.start === b.start
? a.end < b.end
: a.start < b.start
)
.concat(regExpHighlights)
}
console.error("Expected a string or an array of strings")
return null
},
safe_tags_replace(str) {
return str.replace(/[&<>]/g, this.replaceTag)
},
replaceTag(tag) {
return tagsToReplace[tag] || tag
},
getRegexIndices(regex, str) {
if (!regex.global) {
console.error("Expected " + regex + " to be global")
return []
}
regex = RegExp(regex)
const indices = []
let match = null
while ((match = regex.exec(str)) != null) {
indices.push({
start: match.index,
end: match.index + match[0].length - 1,
})
}
return indices
},
getIndicesOf(searchStr, str, caseSensitive) {
const searchStrLen = searchStr.length
if (searchStrLen === 0) {
return []
}
let startIndex = 0
let index
const indices = []
if (!caseSensitive) {
str = str.toLowerCase()
searchStr = searchStr.toLowerCase()
}
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
indices.push(index)
startIndex = index + searchStrLen
}
return indices
},
saveSelection(containerEl) {
let start
if (window.getSelection && document.createRange) {
const selection = window.getSelection()
if (!selection || selection.rangeCount === 0) return
const range = selection.getRangeAt(0)
const preSelectionRange = range.cloneRange()
preSelectionRange.selectNodeContents(containerEl)
preSelectionRange.setEnd(range.startContainer, range.startOffset)
start = `${preSelectionRange}`.length
return {
start,
end: start + `${range}`.length,
}
} else if (document.selection) {
const selectedTextRange = document.selection.createRange()
const preSelectionTextRange = document.body.createTextRange()
preSelectionTextRange.moveToElementText(containerEl)
preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange)
start = preSelectionTextRange.text.length
return {
start,
end: start + selectedTextRange.text.length,
}
}
},
// Copied but modifed slightly from: https://stackoverflow.com/questions/14636218/jquery-convert-text-url-to-link-as-typing/14637351#14637351
restoreSelection(containerEl, savedSel) {
if (!savedSel) return
if (window.getSelection && document.createRange) {
let charIndex = 0
const range = document.createRange()
range.setStart(containerEl, 0)
range.collapse(true)
const nodeStack = [containerEl]
let node
let foundStart = false
let stop = false
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType === 3) {
const nextCharIndex = charIndex + node.length
if (
!foundStart &&
savedSel.start >= charIndex &&
savedSel.start <= nextCharIndex
) {
range.setStart(node, savedSel.start - charIndex)
foundStart = true
}
if (
foundStart &&
savedSel.end >= charIndex &&
savedSel.end <= nextCharIndex
) {
range.setEnd(node, savedSel.end - charIndex)
stop = true
}
charIndex = nextCharIndex
} else {
let i = node.childNodes.length
while (i--) {
nodeStack.push(node.childNodes[i])
}
}
}
const sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(range)
} else if (document.selection) {
const textRange = document.body.createTextRange()
textRange.moveToElementText(containerEl)
textRange.collapse(true)
textRange.moveEnd("character", savedSel.end)
textRange.moveStart("character", savedSel.start)
textRange.select()
}
},
},
watch(editor, () => {
if (editor.value) {
if (!view.value) initView(editor.value)
} else {
view.value?.destroy()
view.value = undefined
}
})
</script>