FIX: supports height/preview form-kit composer (#31121)

- `@height` was supported but not working correctly, this is now fixed
and tested
- `@preview` was not supported, we would always hide the preview in form
kit. You now have control over this, default `false`.
This commit is contained in:
Joffrey JAFFEUX
2025-02-03 12:56:20 +01:00
committed by GitHub
parent b76c5406bd
commit c8ccf79545
4 changed files with 49 additions and 2 deletions

View File

@ -105,6 +105,7 @@ export default class FKControlWrapper extends Component {
@before={{@before}} @before={{@before}}
@after={{@after}} @after={{@after}}
@height={{@height}} @height={{@height}}
@preview={{@preview}}
@selection={{@selection}} @selection={{@selection}}
id={{@field.id}} id={{@field.id}}
name={{@field.name}} name={{@field.name}}

View File

@ -2,6 +2,7 @@ import Component from "@glimmer/component";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { htmlSafe } from "@ember/template"; import { htmlSafe } from "@ember/template";
import DEditor from "discourse/components/d-editor"; import DEditor from "discourse/components/d-editor";
import concatClass from "discourse/helpers/concat-class";
import { escapeExpression } from "discourse/lib/utilities"; import { escapeExpression } from "discourse/lib/utilities";
export default class FKControlComposer extends Component { export default class FKControlComposer extends Component {
@ -13,7 +14,7 @@ export default class FKControlComposer extends Component {
} }
get style() { get style() {
if (this.args.height) { if (!this.args.height) {
return; return;
} }
@ -25,7 +26,10 @@ export default class FKControlComposer extends Component {
@value={{readonly @field.value}} @value={{readonly @field.value}}
@change={{this.handleInput}} @change={{this.handleInput}}
@disabled={{@field.disabled}} @disabled={{@field.disabled}}
class="form-kit__control-composer" class={{concatClass
"form-kit__control-composer"
(if @preview "--preview")
}}
style={{this.style}} style={{this.style}}
@textAreaId={{@field.id}} @textAreaId={{@field.id}}
/> />

View File

@ -44,5 +44,41 @@ module(
assert.dom(".d-editor-input").hasAttribute("disabled"); assert.dom(".d-editor-input").hasAttribute("disabled");
}); });
test("@height", async function (assert) {
await render(<template>
<Form as |form|>
<form.Field @name="foo" @title="Foo" as |field|>
<field.Composer @height={{42}} />
</form.Field>
</Form>
</template>);
assert
.dom(".form-kit__control-composer")
.hasAttribute("style", "height: 42px");
});
test("@preview", async function (assert) {
await render(<template>
<Form as |form|>
<form.Field @name="foo" @title="Foo" as |field|>
<field.Composer />
</form.Field>
</Form>
</template>);
assert.dom(".form-kit__control-composer.--preview").doesNotExist();
await render(<template>
<Form as |form|>
<form.Field @name="foo" @title="Foo" as |field|>
<field.Composer @preview={{true}} />
</form.Field>
</Form>
</template>);
assert.dom(".form-kit__control-composer.--preview").exists();
});
} }
); );

View File

@ -7,6 +7,12 @@
display: none; display: none;
} }
&.--preview {
.d-editor-preview-wrapper {
display: block;
}
}
.d-editor-button-bar { .d-editor-button-bar {
> .btn { > .btn {
border-radius: 0; border-radius: 0;