diff --git a/client/homebrew/editor/settingsEditor/settingsEditor.jsx b/client/homebrew/editor/settingsEditor/settingsEditor.jsx
new file mode 100644
index 000000000..9ebc685e8
--- /dev/null
+++ b/client/homebrew/editor/settingsEditor/settingsEditor.jsx
@@ -0,0 +1,139 @@
+import '../uiEditor.less';
+import React from 'react';
+
+const SettingsEditor = ({ settings, updateSettings = ()=>{}, EditorThemeNameList })=>{
+
+ const validations = {
+
+ };
+
+ const handleFieldChange = (setting, e)=>{
+ const value =
+ e.target.type === 'checkbox'
+ ? e.target.checked
+ : e.target.value;
+
+ const inputRules = validations[setting] ?? [];
+
+ const validationErrors = inputRules
+ .map((rule)=>rule(value))
+ .filter(Boolean);
+
+ if(validationErrors.length > 0) {
+ e.target.setCustomValidity(validationErrors.join('\n'));
+ e.target.reportValidity();
+ return;
+ }
+
+ e.target.setCustomValidity('');
+
+ const updatedSettings = {
+ ...settings,
+ [setting] : e.target.type === 'number'
+ ? Number(value)
+ : value,
+ };
+
+ updateSettings(updatedSettings);
+ };
+
+ return (
+
+
Editor Settings
+
+
+
+
+
+
+
+
+
+
+
+ handleFieldChange('autoCloseBrackets', e)}
+ />
+
+
+
+
+
+
+ handleFieldChange('showImagePreviews', e)}
+ />
+
+
+
+
+
+
+ handleFieldChange('activeLineShading', e)}
+ />
+
+
+
+
+
+
+
+ handleFieldChange('lineNumbers', e)}
+ />
+
+
+
+
+
+
+
+ from 9px to 30px
+ handleFieldChange('fontSize', e)}
+ />
+
+
+
+ );
+};
+
+export default SettingsEditor;
\ No newline at end of file
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 4bc46723c..9aa6b5ab7 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -10,6 +10,7 @@ import cx from 'classnames';
import { loadHistory } from '../../utils/versionHistory.js';
import { brewSnippetsToJSON } from '@shared/helpers.js';
+/*eslint-disable camelcase*/
import Legacy5ePHB from '@themes/Legacy/5ePHB/snippets.js';
import V3_5ePHB from '@themes/V3/5ePHB/snippets.js';
import V3_5eDMG from '@themes/V3/5eDMG/snippets.js';
@@ -23,26 +24,7 @@ const ThemeSnippets = {
V3_Journal : V3_Journal,
V3_Blank : V3_Blank,
};
-
-import defaultCM5Theme from '@themes/codeMirror/default.js';
-import darkbrewery from '@themes/codeMirror/darkbrewery.js';
-import cm5Themes from 'codemirror-5-themes';
-
-const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
-
-const themeNames = Object.entries(themes)
- .filter(([name, value])=>Array.isArray(value) &&
- !name.endsWith('Init') &&
- !name.endsWith('Style')
- )
- .map(([name])=>name);
-
-const EditorThemes = [
- 'default',
- ...themeNames
- .filter((name)=>name !== 'default')
- .sort((a, b)=>a.localeCompare(b))
-];
+/*eslint-enable camelcase */
const execute = function(val, props){
if(_.isFunction(val)) return val(props);
@@ -53,30 +35,28 @@ const Snippetbar = createReactClass({
displayName : 'SnippetBar',
getDefaultProps : function() {
return {
- brew : {},
- view : 'text',
- onViewChange : ()=>{},
- onInject : ()=>{},
- onToggle : ()=>{},
- showEditButtons : true,
- renderer : 'legacy',
- undo : ()=>{},
- redo : ()=>{},
- historySize : ()=>{},
- foldCode : ()=>{},
- unfoldCode : ()=>{},
- formatCode : ()=>{},
- updateEditorTheme : ()=>{},
- cursorPos : {},
- themeBundle : [],
- updateBrew : ()=>{}
+ brew : {},
+ view : 'text',
+ onViewChange : ()=>{},
+ onInject : ()=>{},
+ onToggle : ()=>{},
+ showEditButtons : true,
+ renderer : 'legacy',
+ undo : ()=>{},
+ redo : ()=>{},
+ historySize : ()=>{},
+ foldCode : ()=>{},
+ unfoldCode : ()=>{},
+ formatCode : ()=>{},
+ cursorPos : {},
+ themeBundle : [],
+ updateBrew : ()=>{}
};
},
getInitialState : function() {
return {
renderer : this.props.renderer,
- themeSelector : false,
snippets : [],
showHistory : false,
historyExists : false,
@@ -93,7 +73,6 @@ const Snippetbar = createReactClass({
componentDidUpdate : async function(prevProps, prevState) {
if(prevProps.renderer != this.props.renderer ||
- prevProps.theme != this.props.theme ||
prevProps.themeBundle != this.props.themeBundle ||
prevProps.brew.snippets != this.props.brew.snippets) {
this.setState({
@@ -158,33 +137,6 @@ const Snippetbar = createReactClass({
this.props.onInject(injectedText);
},
- toggleThemeSelector : function(e){
- if(e.target.tagName != 'SELECT'){
- this.setState({
- themeSelector : !this.state.themeSelector
- });
- }
- },
-
- changeTheme : function(e){
- if(e.target.value == this.props.currentEditorTheme) return;
- this.props.updateEditorTheme(e.target.value);
-
- this.setState({
- themeSelector : false,
- });
- },
-
- renderThemeSelector : function(){
- return
-
-
;
- },
-
renderSnippetGroups : function(){
const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
if(snippets.length === 0) return null;
@@ -246,7 +198,7 @@ const Snippetbar = createReactClass({
return (
- {this.props.view !== 'meta' && <>
+ {this.props.view !== 'meta' && this.props.view !== 'settings' && <>
-
>}
@@ -298,6 +245,10 @@ const Snippetbar = createReactClass({
onClick={()=>this.props.onViewChange('meta')}>
+
@@ -346,7 +297,7 @@ const SnippetGroup = createReactClass({
{this.renderSnippets(snippet.subsnippets)}
- )
+ );
}
});
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 7b96fa523..99a68504c 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -3,27 +3,27 @@
@import (less) '@themes/fonts/5e/fonts.less';
.snippetBar {
- --activeTriggerColor: inherit;
- --menuColor : #DDDDDD;
+ --activeTriggerColor : inherit;
+ --menuColor : #DDDDDD;
@menuHeight : 25px;
- position : relative;
- display : flex;
- flex-wrap : wrap-reverse;
- reading-flow : flex-visual;
- justify-content : space-between;
- height : auto;
- color : black;
- background-color : #DDDDDD;
- font-size : .65rem;
- font-family: 'Open Sans', sans-serif;
- text-transform: uppercase;
- font-weight: 800;
+ position : relative;
+ display : flex;
+ flex-wrap : wrap-reverse;
+ justify-content : space-between;
+ height : auto;
+ font-family : 'Open Sans', sans-serif;
+ font-size : 0.65rem;
+ font-weight : 800;
+ color : black;
+ text-transform : uppercase;
+ background-color : #DDDDDD;
+ reading-flow : flex-visual;
.editors {
display : flex;
justify-content : flex-end;
min-width : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
- font-size: .85rem;
+ font-size : 0.85rem;
&:only-child {min-width : unset; margin-left : auto;}
reading-order : 2;
@@ -138,36 +138,32 @@
}
// removed caret for top level items, by request (makes buttons too wide).
- .menu-wrapper .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child .caret { display: none; }
+ .menu-wrapper .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child .caret { display : none; }
.menu-item {
- position : relative;
- display : flex;
- justify-content: space-between;
- align-items : center;
- min-width : max-content;
- padding : 5px;
- cursor : pointer;
- width: 100%;
- &:is(.menu-list .menu-item) [class*="name"] {
- padding-inline: 8px; // additional space between icon and name (helpful in Fonts menu especially).
+ position : relative;
+ display : flex;
+ align-items : center;
+ justify-content : space-between;
+ width : 100%;
+ min-width : max-content;
+ padding : 5px;
+ cursor : pointer;
+ &:is(.menu-list .menu-item) [class*='name'] {
+ padding-inline : 8px; // additional space between icon and name (helpful in Fonts menu especially).
}
.menu-name {
- flex: 1;
- text-align: left;
- text-box-trim: trim-end;
+ flex : 1;
+ text-align : left;
+ text-box-trim : trim-end;
}
i {
min-width : 25px;
- height : .85rem;
+ height : 0.85rem;
font-size : 1.2em;
text-align : center;
- &.caret {
- margin-right: 0;
- }
- &.caret:is(.menu-wrapper .menu-wrapper * ) {
- text-align: right;
- }
+ &.caret { margin-right : 0; }
+ &.caret:is(.menu-wrapper .menu-wrapper *) { text-align : right; }
/* Fonts */
&.font {
height : auto;
@@ -206,18 +202,16 @@
background : grey;
border-radius : 12px;
}
- &:hover {
- background-color : #999999;
- }
+ &:hover { background-color : #999999; }
&:disabled {
- color: gray;
- cursor: not-allowed;
- &:hover { background-color: unset; }
+ color : gray;
+ cursor : not-allowed;
+ &:hover { background-color : unset; }
}
}
}
@container editor (width < 841px) {
- .snippetBar {
+ .snippetBar {
.editors {
flex : 1;
justify-content : space-between;
@@ -232,4 +226,3 @@
.editors > div.history > .dropdown { right : unset; }
}
}
-
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/uiEditor.less
similarity index 83%
rename from client/homebrew/editor/metadataEditor/metadataEditor.less
rename to client/homebrew/editor/uiEditor.less
index 3d3267f80..0b7c004c7 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/uiEditor.less
@@ -5,7 +5,7 @@
padding-left : 10px;
}
-.metadataEditor {
+.ui-editor {
position : absolute;
box-sizing : border-box;
width : 100%;
@@ -17,6 +17,7 @@
h1 {
margin : 0 0 40px;
+ font-size : 15px;
font-weight : bold;
text-transform : uppercase;
}
@@ -63,10 +64,17 @@
&[data-tooltip-right] { max-width : 380px; }
&:invalid { background : #FFB9B9; }
small {
- display : block;
- font-size : 0.9em;
- font-style : italic;
- line-height : 1.4em;
+ display : block;
+ width : fit-content;
+ margin-inline : 5px;
+ font-size : 0.9em;
+ font-style : italic;
+ line-height : 1.4em;
+ }
+
+ input[type='checkbox'], input[type='number'] {
+ float : right;
+ text-align : end;
}
}
input[type='text'], textarea {
@@ -175,47 +183,41 @@
}
.authors.field {
.tag {
- font-weight:300;
- transition:background-color 0.2s;
+ font-weight : 300;
+ transition : background-color 0.2s;
&.owner {
- position: relative;
- background-color:@silverLight;
- min-width:25px;
- display:grid;
- place-items:center;
- font-weight: 900;
+ position : relative;
+ display : grid;
+ place-items : center;
+ min-width : 25px;
+ font-weight : 900;
+ background-color : @silverLight;
&::after {
- content: "\f521";
- font-family: "Font Awesome 6 Free";
- color:gold;
- position: absolute;
- top: 0;
- left: 0;
- width:15px;
- height:15px;
- rotate:-25deg;
- translate:-30% -50%;
- transform: scaleY(0.7);
+ position : absolute;
+ top : 0;
+ left : 0;
+ width : 15px;
+ height : 15px;
+ font-family : 'Font Awesome 6 Free';
+ color : gold;
+ content : '\f521';
+ transform : scaleY(0.7);
+ rotate : -25deg;
+ translate : -30% -50%;
}
}
- &:has(button) a {
- padding-right:5px;
- }
- &:has(button:hover) {
- background:#d97d7d;
- }
+ &:has(button) a { padding-right : 5px; }
+ &:has(button:hover) { background : #D97D7D; }
- button {
- color:@red;
- }
+ button { color : @red; }
}
a {
- color:black;
- text-underline-offset:0.2em;
+ color : black;
+ text-underline-offset : 0.2em;
}
}
@@ -327,9 +329,7 @@
.icon { #groupedIcon; }
- button {
- cursor : pointer;
- }
+ button { cursor : pointer; }
}
.input-group {
@@ -371,4 +371,21 @@
}
}
}
+}
+
+
+.settingsEditor .field {
+ padding-bottom : 10px;
+ border-bottom : 1px solid black;
+
+ .value {
+
+ display : flex;
+ justify-content : end;
+ }
+
+ > label {
+ width : fit-content;
+ max-width : calc(100% - 200px);
+ }
}
\ No newline at end of file
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 4033d0193..dbf3ac9cb 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -294,7 +294,6 @@ const EditPage = (props)=>{
lang={currentBrew.lang}
onPageChange={setCurrentBrewRendererPageNum}
currentEditorCursorPageNum={currentEditorCursorPageNum}
- currentBrewRendererPageNum={currentBrewRendererPageNum}
allowPrint={true}
/>
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index ef2853792..1d35ef0e1 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -141,7 +141,6 @@ const HomePage =(props)=>{
themeBundle={themeBundle}
onPageChange={setCurrentBrewRendererPageNum}
currentEditorCursorPageNum={currentEditorCursorPageNum}
- currentBrewRendererPageNum={currentBrewRendererPageNum}
/>
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index c4eee3e8d..edf4d2125 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -188,7 +188,6 @@ const NewPage = (props)=>{
lang={currentBrew.lang}
onPageChange={setCurrentBrewRendererPageNum}
currentEditorCursorPageNum={currentEditorCursorPageNum}
- currentBrewRendererPageNum={currentBrewRendererPageNum}
allowPrint={true}
/>
diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx
index 99ef3e35c..5280fc850 100644
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -149,7 +149,6 @@ const SharePage = (props)=>{
theme={currentBrew.theme}
themeBundle={themeBundle}
onPageChange={handleBrewRendererPageChange}
- currentBrewRendererPageNum={currentBrewRendererPageNum}
allowPrint={true}
/>