Skip to content

HAR-9797 - feat: added initial support for high contrast mode #552

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

Merged
harbournick merged 8 commits into from
Jun 5, 2025
Merged

HAR-9797 - feat: added initial support for high contrast mode #552

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eabd56f
feat: added initial support for high contrast mode
chittolinag Jun 4, 2025
6fa794d
refactor: use high contrast class only on top element
chittolinag Jun 5, 2025
aab5ebb
feat: expose function to set high contrast mode
chittolinag Jun 5, 2025
6802937
feat: added high contrast mode example
chittolinag Jun 5, 2025
baa2e1d
refactor: removed high contrast example
chittolinag Jun 5, 2025
de22944
fix: added missing dep
chittolinag Jun 5, 2025
a0776fc
feat: added missing package-lock changes
chittolinag Jun 5, 2025
9e3b43b
fix: removed unnecessary change
chittolinag Jun 5, 2025
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
2 changes: 1 addition & 1 deletion examples/react-example/package-lock.json
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@harbournick harbournick Jun 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove any changes in this lock file unless strictly necessary to prevent any potential issues with install (we've had issues with unintentional changes in lock files)

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

70 changes: 44 additions & 26 deletions packages/super-editor/src/components/toolbar/AlignmentButtons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script setup>
import { useHighContrastMode } from '../../composables/use-high-contrast-mode';

import { toolbarIcons } from './toolbarIcons.js';

const { isHighContrastMode } = useHighContrastMode();
const emit = defineEmits(['select']);

const select = (alignment) => {
Expand All @@ -9,11 +12,15 @@ const select = (alignment) => {
</script>

<template>
<div class="alignment-buttons">
<div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option"></div>
<div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter" data-item="btn-textAlign-option"></div>
<div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option"></div>
<div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify" data-item="btn-textAlign-option"></div>
<div class="alignment-buttons" :class="{ 'high-contrast': isHighContrastMode }">
<div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option">
</div>
<div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter"
data-item="btn-textAlign-option"></div>
<div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option">
</div>
<div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify"
data-item="btn-textAlign-option"></div>
</div>
</template>

Expand All @@ -24,27 +31,38 @@ const select = (alignment) => {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.button-icon {
cursor: pointer;
padding: 5px;
font-size: 16px;
width: 25px;
height: 25px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.button-icon:hover {
background-color: #d8dee5;
}

.button-icon :deep(svg) {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
.button-icon {
cursor: pointer;
padding: 5px;
font-size: 16px;
width: 25px;
height: 25px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;

&:hover {
background-color: #d8dee5;
}

:deep(svg) {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
}

&.high-contrast {
.button-icon {
&:hover {
background-color: #000;
color: #fff;
}
}
}
}
</style>
80 changes: 41 additions & 39 deletions packages/super-editor/src/components/toolbar/ButtonGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ToolbarButton from './ToolbarButton.vue';
import ToolbarSeparator from './ToolbarSeparator.vue';
import OverflowMenu from './OverflowMenu.vue';
import { NDropdown, NTooltip, NSelect } from 'naive-ui';
import { useHighContrastMode } from '../../composables/use-high-contrast-mode';

const emit = defineEmits(['command']);

Expand All @@ -23,6 +24,7 @@ const props = defineProps({
});

const currentItem = ref(null);
const { isHighContrastMode } = useHighContrastMode();
// Matches media query from SuperDoc.vue
const isMobile = window.matchMedia('(max-width: 768px)').matches;
const styleMap = {
Expand Down Expand Up @@ -96,38 +98,23 @@ const handleClickOutside = (e) => {

<template>
<div :style="getPositionStyle" class="button-group">
<div
v-for="item in toolbarItems"
:key="item.id.value"
:class="{
<div v-for="item in toolbarItems" :key="item.id.value" :class="{
narrow: item.isNarrow.value,
wide: item.isWide.value,
}"
class="toolbar-item-ctn"
>
}" class="toolbar-item-ctn">
<!-- toolbar separator -->
<ToolbarSeparator v-if="isSeparator(item)" style="width: 20px" />

<!-- Toolbar button -->
<n-dropdown
v-if="isDropdown(item) && item.nestedOptions?.value?.length"
:options="dropdownOptions(item)"
:trigger="item.disabled.value ? null : 'click'"
:show="item.expand.value"
size="medium"
placement="bottom-start"
class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
@select="(key, option) => handleSelect(item, option)"
@clickoutside="handleClickOutside"
:style="item.dropdownStyles.value"
>
<n-dropdown v-if="isDropdown(item) && item.nestedOptions?.value?.length" :options="dropdownOptions(item)"
:trigger="item.disabled.value ? null : 'click'" :show="item.expand.value" size="medium" placement="bottom-start"
class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown" :class="{ 'high-contrast': isHighContrastMode }"
@select="(key, option) => handleSelect(item, option)" @clickoutside="handleClickOutside"
:style="item.dropdownStyles.value">
<n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
<template #trigger>
<ToolbarButton
:toolbar-item="item"
@textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@buttonClick="handleToolbarButtonClick(item)"
/>
<ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@buttonClick="handleToolbarButtonClick(item)" />
</template>
<div>
{{ item.tooltip }}
Expand All @@ -138,11 +125,8 @@ const handleClickOutside = (e) => {

<n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
<template #trigger>
<ToolbarButton
:toolbar-item="item"
@textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@buttonClick="handleToolbarButtonClick(item)"
/>
<ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@buttonClick="handleToolbarButtonClick(item)" />
</template>
<div v-if="item.tooltip">
{{ item.tooltip }}
Expand All @@ -151,11 +135,8 @@ const handleClickOutside = (e) => {
</n-tooltip>

<!-- Overflow menu -->
<OverflowMenu
v-if="isOverflow(item) && overflowItems.length"
:toolbar-item="item"
:overflow-items="overflowItems"
/>
<OverflowMenu v-if="isOverflow(item) && overflowItems.length" :toolbar-item="item"
:overflow-items="overflowItems" />
</div>
</div>
</template>
Expand All @@ -167,11 +148,32 @@ const handleClickOutside = (e) => {
cursor: pointer;
}

.sd-editor-toolbar-dropdown .n-dropdown-option-body {
&:hover {
&::before,
&::after {
background-color: #d8dee5 !important;
.sd-editor-toolbar-dropdown {
&.high-contrast {
.n-dropdown-option-body {
&:hover {

&::before,
&::after {
background-color: #000 !important;
}
}

&__label {
&:hover {
color: #fff !important;
}
}
}
}

.n-dropdown-option-body {
&:hover {

&::before,
&::after {
background-color: #d8dee5 !important;
}
}
}
}
Expand Down
95 changes: 61 additions & 34 deletions packages/super-editor/src/components/toolbar/DocumentMode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<script setup>
import { ref } from 'vue';
import { useHighContrastMode } from '../../composables/use-high-contrast-mode';

const emit = defineEmits(['select']);

const { isHighContrastMode } = useHighContrastMode();

const props = defineProps({
options: {
type: Array,
Expand All @@ -12,14 +18,9 @@ const handleClick = (item) => {
</script>

<template>
<div class="document-mode">
<div
class="option-item"
v-for="option in options"
@click="handleClick(option)"
:class="{ disabled: option.disabled }"
data-item="btn-documentMode-option"
>
<div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
<div class="option-item" v-for="option in options" @click="handleClick(option)"
:class="{ disabled: option.disabled }" data-item="btn-documentMode-option">
<div class="document-mode-column icon-column">
<div class="icon-column__icon" v-html="option.icon"></div>
</div>
Expand All @@ -37,24 +38,19 @@ const handleClick = (item) => {
</template>

<style scoped>
.document-mode :deep(svg) {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}

.disabled {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none;
}
.document-mode {
.document-mode {
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
}

:deep(svg) {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}

.option-item {
display: flex;
flex-direction: row;
Expand All @@ -63,11 +59,44 @@ const handleClick = (item) => {
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;

&:hover {
background-color: #c8d0d8;
}
}

&.high-contrast {
.option-item {
&:hover {
background-color: #000;
color: #fff;

.icon-column__icon {
color: #fff;
}

.text-column {

>.document-mode-type,
>.document-mode-description {
color: #fff;
}
}
}
}
}
}

.disabled {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none;
}
.document-mode-column {
display: flex;
flex-direction: column;
}

.document-mode-type {
font-weight: 400;
font-size: 15px;
Expand All @@ -82,27 +111,25 @@ const handleClick = (item) => {
color: black;
height: 100%;
box-sizing: border-box;
}

.icon-column__icon {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 18px;
color: #47484a;
&__icon {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 18px;
color: #47484a;
}
}

.icon-column__icon :deep(svg) {
width: auto; /* needed for safari */
width: auto;
/* needed for safari */
max-height: 18px;
}

.document-mode-description {
font-size: 12px;
color: #666;
}
.option-item:hover {
background-color: #c8d0d8;
}
</style>
Loading
Loading