PR Feedback updates
This commit is contained in:
Dean
parent
cd95df629e
commit
985c7eb56e
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
// For handlebars only.
|
||||
const bindStyle = new MatchDecorator({
|
||||
regexp: /{{[."#\-\w\s]*}}/g,
|
||||
regexp: /{{[."#\-\w\s\]\[]*}}/g,
|
||||
decoration: () => {
|
||||
return Decoration.mark({
|
||||
tag: "span",
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
highlightSpecialChars(),
|
||||
autocompletion({
|
||||
override: [...completions],
|
||||
closeOnBlur: false,
|
||||
closeOnBlur: true,
|
||||
icons: false,
|
||||
optionClass: () => "autocomplete-option",
|
||||
}),
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
keymap.of(buildKeymap()),
|
||||
themeConfig.of([
|
||||
getDefaultTheme({
|
||||
height,
|
||||
height: editorHeight,
|
||||
resize,
|
||||
dark: isDark,
|
||||
}),
|
||||
|
|
@ -181,6 +181,7 @@
|
|||
},
|
||||
{
|
||||
scrollIntoView: true,
|
||||
userEvent: "input.type",
|
||||
}
|
||||
)
|
||||
view.dispatch(tr)
|
||||
|
|
@ -213,6 +214,8 @@
|
|||
})
|
||||
}
|
||||
|
||||
$: editorHeight = typeof height === "number" ? `${height}px` : height
|
||||
|
||||
// Init when all elements are ready
|
||||
$: if (mounted && !isEditorInitialised) {
|
||||
isEditorInitialised = true
|
||||
|
|
@ -229,7 +232,7 @@
|
|||
editor.dispatch({
|
||||
effects: themeConfig.reconfigure([
|
||||
getDefaultTheme({
|
||||
height,
|
||||
height: editorHeight,
|
||||
resize,
|
||||
dark: isDark,
|
||||
}),
|
||||
|
|
@ -279,8 +282,6 @@
|
|||
.code-editor :global(.autocomplete-option .cm-completionDetail) {
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border-radius: var(--border-radius-s);
|
||||
padding: 2px 4px;
|
||||
margin-left: 2px;
|
||||
/* font-weight: 600; */
|
||||
padding: 4px 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export const getDefaultTheme = opts => {
|
|||
borderLeftColor: "var(--spectrum-alias-text-color)",
|
||||
},
|
||||
"&": {
|
||||
height: height ? `${height}px` : "",
|
||||
height: height ? `${height}` : "",
|
||||
lineHeight: "1.3",
|
||||
border:
|
||||
"var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
|
||||
|
|
@ -49,6 +49,7 @@ export const getDefaultTheme = opts => {
|
|||
"& .cm-tooltip.cm-tooltip-autocomplete > ul": {
|
||||
fontFamily:
|
||||
"var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))",
|
||||
maxHeight: "16em",
|
||||
},
|
||||
"& .cm-placeholder": {
|
||||
color: "var(--spectrum-alias-text-color)",
|
||||
|
|
@ -62,6 +63,7 @@ export const getDefaultTheme = opts => {
|
|||
"& .cm-completionDetail": {
|
||||
fontStyle: "unset",
|
||||
textTransform: "uppercase",
|
||||
fontSize: "10px",
|
||||
},
|
||||
"& .info-bubble": {
|
||||
fontSize: "var(--font-size-s)",
|
||||
|
|
@ -145,7 +147,7 @@ export const buildSectionHeader = (type, sectionName, icon, rank) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const helpersToCompletion = helpers => {
|
||||
export const helpersToCompletion = (helpers, mode) => {
|
||||
const { type, name: sectionName, icon } = SECTIONS.HB_HELPER
|
||||
const helperSection = buildSectionHeader(type, sectionName, icon, 99)
|
||||
|
||||
|
|
@ -159,16 +161,19 @@ export const helpersToCompletion = helpers => {
|
|||
type: "helper",
|
||||
section: helperSection,
|
||||
detail: "FUNCTION",
|
||||
apply: (view, completion, from, to) => {
|
||||
insertBinding(view, from, to, key, mode)
|
||||
},
|
||||
})
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
export const getHelperCompletions = () => {
|
||||
export const getHelperCompletions = mode => {
|
||||
const manifest = getManifest()
|
||||
return Object.keys(manifest).reduce((acc, key) => {
|
||||
acc = acc || []
|
||||
return [...acc, ...helpersToCompletion(manifest[key])]
|
||||
return [...acc, ...helpersToCompletion(manifest[key], mode)]
|
||||
}, [])
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +199,7 @@ export const hbAutocomplete = baseCompletions => {
|
|||
if (!bindingStart) {
|
||||
return null
|
||||
}
|
||||
// Accomodate spaces
|
||||
// Accommodate spaces
|
||||
const match = bindingStart.text.match(/{{[\s]*/)
|
||||
const query = bindingStart.text.replace(match[0], "")
|
||||
let filtered = bindingFilter(options, query)
|
||||
|
|
@ -215,7 +220,7 @@ export const jsAutocomplete = baseCompletions => {
|
|||
let options = baseCompletions || []
|
||||
|
||||
if (jsBinding) {
|
||||
// Accomodate spaces
|
||||
// Accommodate spaces
|
||||
const match = jsBinding.text.match(/\$\("[\s]*/)
|
||||
const query = jsBinding.text.replace(match[0], "")
|
||||
let filtered = bindingFilter(options, query)
|
||||
|
|
@ -263,6 +268,7 @@ export const hbInsert = (value, from, to, text) => {
|
|||
} else {
|
||||
parsedInsert = ` ${text} `
|
||||
}
|
||||
|
||||
return parsedInsert
|
||||
}
|
||||
|
||||
|
|
@ -296,6 +302,16 @@ export const insertBinding = (view, from, to, text, mode) => {
|
|||
return
|
||||
}
|
||||
|
||||
let bindingClosePattern = mode.name == "javascript" ? /[\s]*"\)/ : /[\s]*}}/
|
||||
let sliced = view.state.doc?.toString().slice(to)
|
||||
|
||||
const rightBrace = sliced.match(bindingClosePattern)
|
||||
let cursorPos = from + parsedInsert.length
|
||||
|
||||
if (rightBrace) {
|
||||
cursorPos = from + parsedInsert.length + rightBrace[0].length
|
||||
}
|
||||
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from,
|
||||
|
|
@ -303,7 +319,7 @@ export const insertBinding = (view, from, to, text, mode) => {
|
|||
insert: parsedInsert,
|
||||
},
|
||||
selection: {
|
||||
anchor: from + parsedInsert.length,
|
||||
anchor: cursorPos,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,10 +195,11 @@
|
|||
completions={[
|
||||
hbAutocomplete([
|
||||
...bindingCompletions,
|
||||
...getHelperCompletions(),
|
||||
...getHelperCompletions(editorMode),
|
||||
]),
|
||||
]}
|
||||
placeholder=""
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="binding-footer">
|
||||
|
|
@ -292,12 +293,13 @@
|
|||
completions={[
|
||||
jsAutocomplete([
|
||||
...bindingCompletions,
|
||||
...getHelperCompletions(),
|
||||
...getHelperCompletions(editorMode),
|
||||
]),
|
||||
]}
|
||||
mode={EditorModes.JS}
|
||||
bind:getCaretPosition
|
||||
bind:insertAtPos
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="binding-footer">
|
||||
|
|
@ -349,6 +351,7 @@
|
|||
</Button>
|
||||
<Button
|
||||
cta
|
||||
disabled={!valid}
|
||||
on:click={() => {
|
||||
bindingDrawerActions.save()
|
||||
}}
|
||||
|
|
@ -419,12 +422,11 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 270px;
|
||||
grid-template-rows: 315px;
|
||||
}
|
||||
.main-content.binding-panel {
|
||||
grid-template-columns: 1fr 320px;
|
||||
|
|
@ -436,11 +438,14 @@
|
|||
}
|
||||
.editor {
|
||||
padding: var(--spacing-xl);
|
||||
padding-bottom: 0px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.overlay-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.mode-overlay {
|
||||
position: absolute;
|
||||
|
|
@ -469,4 +474,9 @@
|
|||
display: flex;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
|
||||
.binding-drawer :global(.code-editor),
|
||||
.binding-drawer :global(.code-editor > div) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue