Rich Text EditorCommunity Asset

<script lang="ts" setup>
const value = ref(
  `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph 1</p><p>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><ul><li><p>Ordered 1</p></li><li><p>Ordered 2</p></li><li><p>Ordered 3</p></li></ul><p>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><blockquote><p>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.</p></blockquote><ol><li><p>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.</p></li><li><p>Point two</p></li><li><p>Point three</p></li></ol><p>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:</p><table><tr><th>ID</th><th>Name</th><th>City</th><th>Country</th><th>Age</th><th>Occupation</th><th>Favorite Food</th><th>Hobby</th><th>Email</th><th>Status</th></tr><tr><td>102</td><td>Yonezawa Akinori</td><td>Naha</td><td>Japan</td><td>29</td><td>Designer</td><td>Sushi</td><td>Painting</td><td>yonezawa@email.jp</td><td>Active</td></tr><tr><td>202</td><td>Nilay Patel</td><td>Sendai</td><td>Japan</td><td>34</td><td>Engineer</td><td>Pizza</td><td>Cycling</td><td>nilay@email.jp</td><td>On Leave</td></tr><tr><td>104</td><td>Murata Makoto</td><td>Kumamoto</td><td>Japan</td><td>27</td><td>Teacher</td><td>Paella</td><td>Reading</td><td>murata@email.jp</td><td>Active</td></tr></table><p>A predicate for <u>this</u> relation, using the attribute names to denote free variables, might be "Employee number ID is known as Name and lives at Address". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.</p>`,
)
</script>

<template>
  <RichTextEditor v-model="value" label="Label" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

<template>
  <RichTextEditor v-model="value" label="Label" :required="false" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

<template>
  <RichTextEditor
    v-model="value"
    label="Label"
    hint="Hint is an accessible way to provide additional information that might help the user"
  />
</template>

<script lang="ts" setup>
const value = ref(
  `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph 1</p><p>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><ul><li><p>Ordered 1</p></li><li><p>Ordered 2</p></li><li><p>Ordered 3</p></li></ul><p>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><blockquote><p>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.</p></blockquote><ol><li><p>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.</p></li><li><p>Point two</p></li><li><p>Point three</p></li></ol><p>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:</p><table><tr><th>ID</th><th>Name</th><th>City</th><th>Country</th><th>Age</th><th>Occupation</th><th>Favorite Food</th><th>Hobby</th><th>Email</th><th>Status</th></tr><tr><td>102</td><td>Yonezawa Akinori</td><td>Naha</td><td>Japan</td><td>29</td><td>Designer</td><td>Sushi</td><td>Painting</td><td>yonezawa@email.jp</td><td>Active</td></tr><tr><td>202</td><td>Nilay Patel</td><td>Sendai</td><td>Japan</td><td>34</td><td>Engineer</td><td>Pizza</td><td>Cycling</td><td>nilay@email.jp</td><td>On Leave</td></tr><tr><td>104</td><td>Murata Makoto</td><td>Kumamoto</td><td>Japan</td><td>27</td><td>Teacher</td><td>Paella</td><td>Reading</td><td>murata@email.jp</td><td>Active</td></tr></table><p>A predicate for <u>this</u> relation, using the attribute names to denote free variables, might be "Employee number ID is known as Name and lives at Address". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.</p>`,
)
</script>

<template>
  <RichTextEditor v-model="value" label="Label" :character-limit="2000" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

<template>
  <RichTextEditor
    v-model="value"
    label="Label"
    error="This is an error message"
  />
</template>

<script lang="ts" setup>
const value = ref(
  `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph 1</p><p>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><ul><li><p>Ordered 1</p></li><li><p>Ordered 2</p></li><li><p>Ordered 3</p></li></ul><p>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><blockquote><p>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.</p></blockquote><ol><li><p>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.</p></li><li><p>Point two</p></li><li><p>Point three</p></li></ol><p>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:</p><table><tr><th>ID</th><th>Name</th><th>City</th><th>Country</th><th>Age</th><th>Occupation</th><th>Favorite Food</th><th>Hobby</th><th>Email</th><th>Status</th></tr><tr><td>102</td><td>Yonezawa Akinori</td><td>Naha</td><td>Japan</td><td>29</td><td>Designer</td><td>Sushi</td><td>Painting</td><td>yonezawa@email.jp</td><td>Active</td></tr><tr><td>202</td><td>Nilay Patel</td><td>Sendai</td><td>Japan</td><td>34</td><td>Engineer</td><td>Pizza</td><td>Cycling</td><td>nilay@email.jp</td><td>On Leave</td></tr><tr><td>104</td><td>Murata Makoto</td><td>Kumamoto</td><td>Japan</td><td>27</td><td>Teacher</td><td>Paella</td><td>Reading</td><td>murata@email.jp</td><td>Active</td></tr></table><p>A predicate for <u>this</u> relation, using the attribute names to denote free variables, might be "Employee number ID is known as Name and lives at Address". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.</p>`,
)
const comboboxValue = ref(['history'])
const comboboxOptions = ref([
  { value: 'history', label: 'History' },
  { value: 'batman', label: 'Batman' },
  { value: 'robin', label: 'Robin' },
  { value: 'joker', label: 'Joker' },
])
</script>

<template>
  <RichTextEditor
    v-model="value"
    label="Example label"
    hint="Example hint"
    size="s"
  >
    <template #header>
      <div class="n-padding-be-xs">
        <div
          class="n-margin-be-s n-color-text-weak n-font-size-l n-font-weight-heading"
        >
          Edit clinical note
        </div>
        <ComboboxMultiple
          v-model="comboboxValue"
          class="n-margin-be-xs"
          name="rich-text-editor-select"
          label="Clinical note type"
          :options="comboboxOptions"
          hide-label
          expand
          create-option
        />
      </div>
    </template>
    <template #additional-controls>
      <nord-button size="s">Add template</nord-button>
      <nord-dropdown>
        <nord-button slot="toggle" size="s">Today, 16:15</nord-button>
        <nord-dropdown-item>View profile</nord-dropdown-item>
        <nord-dropdown-item>Settings</nord-dropdown-item>
        <nord-dropdown-item>Show keyboard shortcuts</nord-dropdown-item>
      </nord-dropdown>
      <AutoSave />
    </template>
    <template #footer>
      <nord-button-group
        variant="spaced"
        class="n-stack-horizontal n-justify-end"
      >
        <nord-button>Discard note</nord-button>
        <nord-button variant="primary">Add note</nord-button>
      </nord-button-group>
    </template>
  </RichTextEditor>
</template>

<script lang="ts" setup>
const value = ref(
  `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph 1</p><p>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><ul><li><p>Ordered 1</p></li><li><p>Ordered 2</p></li><li><p>Ordered 3</p></li></ul><p>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><blockquote><p>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.</p></blockquote><ol><li><p>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.</p></li><li><p>Point two</p></li><li><p>Point three</p></li></ol><p>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:</p><table><tr><th>ID</th><th>Name</th><th>City</th><th>Country</th><th>Age</th><th>Occupation</th><th>Favorite Food</th><th>Hobby</th><th>Email</th><th>Status</th></tr><tr><td>102</td><td>Yonezawa Akinori</td><td>Naha</td><td>Japan</td><td>29</td><td>Designer</td><td>Sushi</td><td>Painting</td><td>yonezawa@email.jp</td><td>Active</td></tr><tr><td>202</td><td>Nilay Patel</td><td>Sendai</td><td>Japan</td><td>34</td><td>Engineer</td><td>Pizza</td><td>Cycling</td><td>nilay@email.jp</td><td>On Leave</td></tr><tr><td>104</td><td>Murata Makoto</td><td>Kumamoto</td><td>Japan</td><td>27</td><td>Teacher</td><td>Paella</td><td>Reading</td><td>murata@email.jp</td><td>Active</td></tr></table><p>A predicate for <u>this</u> relation, using the attribute names to denote free variables, might be "Employee number ID is known as Name and lives at Address". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.</p>`,
)
const comboboxValue = ref(['history'])
const comboboxOptions = ref([
  { value: 'history', label: 'History' },
  { value: 'batman', label: 'Batman' },
  { value: 'robin', label: 'Robin' },
  { value: 'joker', label: 'Joker' },
])
</script>

<template>
  <RichTextEditor
    v-model="value"
    label="Example label"
    hint="Example hint"
    size="s"
    error="This is an error message"
    :character-limit="2000"
  >
    <template #header>
      <div class="n-padding-be-xs">
        <div
          class="n-margin-be-s n-color-text-weak n-font-size-l n-font-weight-heading"
        >
          Edit clinical note
        </div>
        <ComboboxMultiple
          v-model="comboboxValue"
          class="n-margin-be-xs"
          name="rich-text-editor-select"
          label="Clinical note type"
          :options="comboboxOptions"
          hide-label
          expand
          create-option
        />
      </div>
    </template>
    <template #additional-controls>
      <nord-button size="s">Add template</nord-button>
      <nord-dropdown>
        <nord-button slot="toggle" size="s">Today, 16:15</nord-button>
        <nord-dropdown-item>View profile</nord-dropdown-item>
        <nord-dropdown-item>Settings</nord-dropdown-item>
        <nord-dropdown-item>Show keyboard shortcuts</nord-dropdown-item>
      </nord-dropdown>
      <AutoSave />
    </template>
    <template #footer>
      <nord-button-group
        variant="spaced"
        class="n-stack-horizontal n-justify-end"
      >
        <nord-button>Discard note</nord-button>
        <nord-button variant="primary">Add note</nord-button>
      </nord-button-group>
    </template>
  </RichTextEditor>
</template>

<script lang="ts" setup>
const value = ref(
  `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph 1</p><p>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><ul><li><p>Ordered 1</p></li><li><p>Ordered 2</p></li><li><p>Ordered 3</p></li></ul><p>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.</p><blockquote><p>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.</p></blockquote><ol><li><p>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.</p></li><li><p>Point two</p></li><li><p>Point three</p></li></ol>`,
)
</script>

<template>
  <RichTextEditor v-model="value" label="Label" disable-table />
</template>