binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2045] dev: editor variable font sizes and styles support (#5340)

Browse source 
* chore: added variable font size and font style support

* chore: remove font style switcher

* chore: update typography
This commit is contained in:
Aaryan Khandelwal 2024-08-09 19:22:47 +05:30 • committed by GitHub
parent 6d0cf1b4e9
commit 85f8fe9247
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 419 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

61
web/core/hooks/use-page-filters.ts
View file

@ -1,12 +1,67 @@
// plane editor
import { TEditorFontSize, TEditorFontStyle } from "@plane/editor";
// hooks
import useLocalStorage from "@/hooks/use-local-storage";
export type TPagesPersonalizationConfig = {
full_width: boolean;
font_size: TEditorFontSize;
font_style: TEditorFontStyle;
};
const DEFAULT_PERSONALIZATION_VALUES: TPagesPersonalizationConfig = {
full_width: false,
font_size: "large-font",
font_style: "sans-serif",
};
export const usePageFilters = () => {
const { storedValue: isFullWidth, setValue: setFullWidth } = useLocalStorage<boolean>("page_full_width", true);
const handleFullWidth = (value: boolean) => setFullWidth(value);
// local storage
const { storedValue: pagesConfig, setValue: setPagesConfig } = useLocalStorage<TPagesPersonalizationConfig>(
"pages_config",
DEFAULT_PERSONALIZATION_VALUES
);
// stored values
const isFullWidth = !!pagesConfig?.full_width;
const fontSize = pagesConfig?.font_size ?? DEFAULT_PERSONALIZATION_VALUES.font_size;
const fontStyle = pagesConfig?.font_style ?? DEFAULT_PERSONALIZATION_VALUES.font_style;
// update action
const handleUpdateConfig = (payload: Partial<TPagesPersonalizationConfig>) =>
setPagesConfig({
...(pagesConfig ?? DEFAULT_PERSONALIZATION_VALUES),
...payload,
});
/**
* @description action to update full_width value
* @param {boolean} value
*/
const handleFullWidth = (value: boolean) =>
handleUpdateConfig({
full_width: value,
});
/**
* @description action to update font_size value
* @param {TEditorFontSize} value
*/
const handleFontSize = (value: TEditorFontSize) =>
handleUpdateConfig({
font_size: value,
});
/**
* @description action to update font_size value
* @param {TEditorFontSize} value
*/
const handleFontStyle = (value: TEditorFontStyle) =>
handleUpdateConfig({
font_style: value,
});
return {
isFullWidth: !!isFullWidth,
fontSize,
handleFontSize,
fontStyle,
handleFontStyle,
isFullWidth,
handleFullWidth,
};
};