Merge pull request #66 from irmerk/jl-issue35-sticky-toolbar

feat(*): ap design sync - I35
accordproject · Jul 3, 2019 · c7a3945 · c7a3945
2 parents 7490cfb + 8a5cd4b
commit c7a3945
Show file tree

Hide file tree

Showing 12 changed files with 664 additions and 479 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,24 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
+## Styling
+
+You can style the toolbar of this components, as well as the width of the editor:
+
+#### `editorProps`
+
+This is an object with the following possible css inputs as strings:
+- `BUTTON_BACKGROUND_INACTIVE`
+- `BUTTON_BACKGROUND_ACTIVE`
+- `BUTTON_SYMBOL_INACTIVE`
+- `BUTTON_SYMBOL_ACTIVE`
+- `DROPDOWN_COLOR`
+- `TOOLBAR_BACKGROUND`
+- `TOOLTIP_BACKGROUND`
+- `TOOLTIP`
+- `TOOLBAR_SHADOW`
+- `WIDTH`
+
 ---
 
 <a href="https://www.accordproject.org/">

diff --git a/assets/APLogo.png b/assets/APLogo.png
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -57,6 +57,10 @@ Another video:
 
 <video src="https://www.youtube.com/embed/cmmq-JBMbbQ"/>`;
 
+const propsObj = {
+  WIDTH: '600px',
+};
+
 /**
  * Simple demo component that tracks whether to lockText
  * and whether to use markdown mode.
@@ -93,7 +97,7 @@ function Demo() {
       </Grid.Column>
 
       <Grid.Column>
-        <SlateAsInputEditor readOnly={false} lockText={true} plugins={plugins} value={slateValue} onChange={onSlateValueChange}/>
+        <SlateAsInputEditor readOnly={false} lockText={true} plugins={plugins} value={slateValue} onChange={onSlateValueChange} editorProps={propsObj} />
       </Grid.Column>
     </Grid>
     <Divider vertical>Preview</Divider>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -99,4 +99,4 @@
     "style-loader": "^0.23.1",
     "styled-components": "^4.3.2"
   }
-}
+}