Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Allow editing of long strings in the PCodeInput component #871

Merged
merged 5 commits into from
Aug 18, 2023
Merged

Fix: Allow editing of long strings in the PCodeInput component #871

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c0cd9e6
add large width -works
zhen0 Aug 1, 2023
310e085
still hard code it but with more flexibility
zhen0 Aug 1, 2023
db67477
changes from pairing with Nicholas
zhen0 Aug 18, 2023
c041975
Merge branch 'main' into code-width
zhen0 Aug 18, 2023
020740f
Update PCodeInput.vue
zhen0 Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 35 additions & 24 deletions src/components/CodeInput/PCodeInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,30 @@
:style="styles.textarea"
v-bind="ctrlAttrs"
/>

<template v-if="lang">
<PCodeHighlight
:lang="lang"
:text="internalValue"
class="p-code-input__view"
:style="styles.view"
v-bind="ctrlAttrs"
/>
</template>

<template v-else>
<PCode class="p-code-input__view" :style="styles.view" v-bind="ctrlAttrs">
{{ internalValue }}
</PCode>
</template>
<div ref="view" class="p-code-input__view-container">
<template v-if="lang">
<PCodeHighlight
:lang="lang"
:text="internalValue"
class="p-code-input__view"
:style="styles.view"
v-bind="ctrlAttrs"
/>
</template>

<template v-else>
<PCode class="p-code-input__view" :style="styles.view" v-bind="ctrlAttrs">
{{ internalValue }}
</PCode>
</template>
</div>
</div>
</template>
</p-base-input>
</template>

<script lang="ts" setup>
import { useComputedStyle } from '@prefecthq/vue-compositions'
import { useComputedStyle, useElementRect } from '@prefecthq/vue-compositions'
import { computed, ref } from 'vue'
import { PCode, PCodeHighlight, PLineNumbers } from '@/components'
import { useScrollLinking } from '@/compositions'
Expand All @@ -66,6 +67,9 @@
const textarea = ref()
const textareaStyle = useComputedStyle(textarea)

const view = ref()
const { width } = useElementRect(view)

const { source, target } = useScrollLinking()

const lineSplitRegex = /\r|\r\n|\n/
Expand All @@ -80,6 +84,7 @@

return []
})

const lines = computed(() => Math.max(valueLines.value.length, props.minLines ?? 1))
const lineHeight = computed(() => {
if (textareaStyle.value) {
Expand Down Expand Up @@ -111,6 +116,7 @@
return {
textarea: {
height: `${lineHeight.value * lines.value}px`,
width: width.value ? `${width.value}px` : '100%',
},
view: {
height: `${lineHeight.value * lines.value}px`,
Expand Down Expand Up @@ -189,7 +195,7 @@
min-h-[inherit]
overflow-auto
p-0
pt-[var(--gap-y)]
py-[var(--gap-y)]
relative
rounded-lg
self-stretch
Expand Down Expand Up @@ -221,19 +227,24 @@
}

.p-code-input__view { @apply
absolute
bg-transparent
min-h-full
min-w-full
p-0
text-foreground
}

.p-code-input__view-container { @apply
absolute
left-0
min-h-full
min-w-full
overflow-hidden
p-0
pointer-events-none
top-0
z-0
px-[var(--gap-x)]
pt-[var(--gap-y)]
pointer-events-none
select-none
text-foreground
top-0
z-0
}
</style>
Loading