From 0b937b848334f114813b9599d19bb346a52cf6d4 Mon Sep 17 00:00:00 2001
From: zbeyens <ziyad.beyens@gmail.com>
Date: Wed, 8 Jan 2020 20:42:28 +0100
Subject: [PATCH] fix

---
 CHANGELOG.md                                        |  6 ++++++
 .../src/components/EditablePlugins.tsx              |  8 +++++++-
 .../action-item/components/ActionItemElement.tsx    |  4 ++--
 .../blockquote/components/BlockquoteElement.tsx     |  5 ++++-
 .../src/elements/code/components/CodeElement.tsx    |  5 ++++-
 .../src/elements/heading/renderElementHeading.tsx   | 13 ++++++++-----
 .../src/elements/image/components/ImageElement.tsx  |  3 ++-
 .../src/elements/link/components/LinkElement.tsx    |  3 ++-
 .../src/elements/list/renderElementList.tsx         |  7 ++-----
 .../elements/mention/components/MentionElement.tsx  |  2 ++
 .../paragraph/components/ParagraphElement.tsx       | 13 -------------
 .../src/elements/paragraph/components/index.ts      |  1 -
 .../elements/paragraph/renderElementParagraph.ts    |  5 ++---
 .../src/elements/table/renderElementTable.tsx       |  4 ++--
 .../slate-plugins/src/elements/utils/getElement.tsx |  7 ++++++-
 .../src/elements/utils/getRenderElement.tsx         |  3 ++-
 .../src/elements/video/components/VideoElement.tsx  |  3 ++-
 .../components/ToolbarSearchHighlight.tsx           | 12 +++++++++++-
 stories/config/globalStyle.ts                       |  4 ----
 19 files changed, 64 insertions(+), 44 deletions(-)
 delete mode 100644 packages/slate-plugins/src/elements/paragraph/components/ParagraphElement.tsx
 delete mode 100644 packages/slate-plugins/src/elements/paragraph/components/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b40467222c..e815236848 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ This is a list of changes to Slate with each new release. Until 1.0.0 is release
 
 ---
 
+### `0.57.6` — January 8, 2020
+
+###### FIX
+
+- `line-height` of heading
+
 ### `0.57.5` — January 7, 2020
 
 ###### BREAKING
diff --git a/packages/slate-plugins/src/components/EditablePlugins.tsx b/packages/slate-plugins/src/components/EditablePlugins.tsx
index 85882dd46e..d14d350564 100644
--- a/packages/slate-plugins/src/components/EditablePlugins.tsx
+++ b/packages/slate-plugins/src/components/EditablePlugins.tsx
@@ -6,6 +6,7 @@ import {
   RenderLeafProps,
   useSlate,
 } from 'slate-react';
+import styled from 'styled-components';
 import {
   Decorate,
   OnDOMBeforeInput,
@@ -29,6 +30,11 @@ interface Props {
   onKeyDown?: OnKeyDown[];
 }
 
+const StyledEditable = styled(Editable)`
+  font-size: 16px;
+  line-height: 26px;
+`;
+
 export const EditablePlugins = ({
   plugins = [],
   decorate: decorateList = [],
@@ -112,7 +118,7 @@ export const EditablePlugins = ({
   };
 
   return (
-    <Editable
+    <StyledEditable
       {...props}
       decorate={decoratePlugins}
       onDOMBeforeInput={onDOMBeforeInputPlugins}
diff --git a/packages/slate-plugins/src/elements/action-item/components/ActionItemElement.tsx b/packages/slate-plugins/src/elements/action-item/components/ActionItemElement.tsx
index 81f1e155e4..f749bedcfa 100644
--- a/packages/slate-plugins/src/elements/action-item/components/ActionItemElement.tsx
+++ b/packages/slate-plugins/src/elements/action-item/components/ActionItemElement.tsx
@@ -7,11 +7,11 @@ import {
   useReadOnly,
 } from 'slate-react';
 import styled from 'styled-components';
+import { ACTION_ITEM } from '../types';
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 3px 0;
 `;
 
 const CheckboxWrapper = styled.div`
@@ -50,7 +50,7 @@ export const ActionItemElement = ({
   const { checked } = element;
 
   return (
-    <Wrapper {...attributes}>
+    <Wrapper {...attributes} data-slate-type={ACTION_ITEM}>
       <CheckboxWrapper contentEditable={false}>
         <Checkbox
           type="checkbox"
diff --git a/packages/slate-plugins/src/elements/blockquote/components/BlockquoteElement.tsx b/packages/slate-plugins/src/elements/blockquote/components/BlockquoteElement.tsx
index e902a69dc3..0a49f1d11d 100644
--- a/packages/slate-plugins/src/elements/blockquote/components/BlockquoteElement.tsx
+++ b/packages/slate-plugins/src/elements/blockquote/components/BlockquoteElement.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
+import { BLOCKQUOTE } from '../types';
 
 const StyledBlockquoteElement = styled.blockquote`
   border-left: 2px solid #ddd;
@@ -14,5 +15,7 @@ export const BlockquoteElement = ({
   attributes,
   children,
 }: RenderElementProps) => (
-  <StyledBlockquoteElement {...attributes}>{children}</StyledBlockquoteElement>
+  <StyledBlockquoteElement {...attributes} data-slate-type={BLOCKQUOTE}>
+    {children}
+  </StyledBlockquoteElement>
 );
diff --git a/packages/slate-plugins/src/elements/code/components/CodeElement.tsx b/packages/slate-plugins/src/elements/code/components/CodeElement.tsx
index bd4c4712f9..3a7713ade0 100644
--- a/packages/slate-plugins/src/elements/code/components/CodeElement.tsx
+++ b/packages/slate-plugins/src/elements/code/components/CodeElement.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
+import { CODE } from '../types';
 
 const Pre = styled.pre`
   padding: 10px;
@@ -10,6 +11,8 @@ const Pre = styled.pre`
 
 export const CodeElement = ({ attributes, children }: RenderElementProps) => (
   <Pre>
-    <code {...attributes}>{children}</code>
+    <code {...attributes} data-slate-type={CODE}>
+      {children}
+    </code>
   </Pre>
 );
diff --git a/packages/slate-plugins/src/elements/heading/renderElementHeading.tsx b/packages/slate-plugins/src/elements/heading/renderElementHeading.tsx
index eeeadae4a6..485f96a0c7 100644
--- a/packages/slate-plugins/src/elements/heading/renderElementHeading.tsx
+++ b/packages/slate-plugins/src/elements/heading/renderElementHeading.tsx
@@ -6,22 +6,25 @@ import { HeadingType, RenderElementHeadingOptions } from './types';
 
 const Heading = styled.div`
   font-weight: 600;
+  line-height: 1.2;
 `;
 
 const StyledH1 = styled(Heading)`
   :not(:first-child) {
-    margin-top: 32px;
+    margin-top: 30px;
   }
-  margin-bottom: 4px;
+  margin-bottom: 12px;
   font-size: 30px;
+  line-height: 36px;
 `;
 
 const StyledH2 = styled(Heading)`
   :not(:first-child) {
-    margin-top: 16px;
+    margin-top: 18px;
   }
-  margin-bottom: 1px;
-  font-size: 24px;
+  margin-bottom: 6px;
+  font-size: 21px;
+  line-height: 28px;
 `;
 
 const StyledH3 = styled(Heading)`
diff --git a/packages/slate-plugins/src/elements/image/components/ImageElement.tsx b/packages/slate-plugins/src/elements/image/components/ImageElement.tsx
index 96e2993f70..02a673e815 100644
--- a/packages/slate-plugins/src/elements/image/components/ImageElement.tsx
+++ b/packages/slate-plugins/src/elements/image/components/ImageElement.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps, useFocused, useSelected } from 'slate-react';
 import styled from 'styled-components';
+import { IMAGE } from '../types';
 
 const Image = styled.img<{ selected: boolean; focused: boolean }>`
   display: block;
@@ -20,7 +21,7 @@ export const ImageElement = ({
   const focused = useFocused();
 
   return (
-    <div {...attributes}>
+    <div {...attributes} data-slate-type={IMAGE}>
       <div contentEditable={false}>
         <Image src={element.url} alt="" selected={selected} focused={focused} />
       </div>
diff --git a/packages/slate-plugins/src/elements/link/components/LinkElement.tsx b/packages/slate-plugins/src/elements/link/components/LinkElement.tsx
index 9ef94cd25f..922aacb6e8 100644
--- a/packages/slate-plugins/src/elements/link/components/LinkElement.tsx
+++ b/packages/slate-plugins/src/elements/link/components/LinkElement.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
+import { LINK } from '../types';
 
 export const LinkElement = ({
   attributes,
   children,
   element,
 }: RenderElementProps) => (
-  <a {...attributes} href={element.url}>
+  <a {...attributes} data-slate-type={LINK} href={element.url}>
     {children}
   </a>
 );
diff --git a/packages/slate-plugins/src/elements/list/renderElementList.tsx b/packages/slate-plugins/src/elements/list/renderElementList.tsx
index f819f2c329..d203182ff5 100644
--- a/packages/slate-plugins/src/elements/list/renderElementList.tsx
+++ b/packages/slate-plugins/src/elements/list/renderElementList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { getElement } from 'elements/utils';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
 import { ListType, RenderElementListOptions } from './types';
@@ -15,14 +16,10 @@ const OlElement = styled.ol`
   margin-block-end: 0;
 `;
 
-const LiElement = styled.li`
-  padding: 3px 0;
-`;
-
 export const renderElementList = ({
   UL = UlElement,
   OL = OlElement,
-  LI = LiElement,
+  LI = getElement('li'),
 }: RenderElementListOptions = {}) => (props: RenderElementProps) => {
   switch (props.element.type) {
     case ListType.UL_LIST:
diff --git a/packages/slate-plugins/src/elements/mention/components/MentionElement.tsx b/packages/slate-plugins/src/elements/mention/components/MentionElement.tsx
index 194d837aeb..334d5919ea 100644
--- a/packages/slate-plugins/src/elements/mention/components/MentionElement.tsx
+++ b/packages/slate-plugins/src/elements/mention/components/MentionElement.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { RenderElementProps, useFocused, useSelected } from 'slate-react';
+import { MENTION } from '../types';
 
 export const MentionElement = ({
   attributes,
@@ -12,6 +13,7 @@ export const MentionElement = ({
   return (
     <span
       {...attributes}
+      data-slate-type={MENTION}
       contentEditable={false}
       style={{
         padding: '3px 3px 2px',
diff --git a/packages/slate-plugins/src/elements/paragraph/components/ParagraphElement.tsx b/packages/slate-plugins/src/elements/paragraph/components/ParagraphElement.tsx
deleted file mode 100644
index 9a853b9515..0000000000
--- a/packages/slate-plugins/src/elements/paragraph/components/ParagraphElement.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { RenderElementProps } from 'slate-react';
-import styled from 'styled-components';
-
-const Paragraph = styled.p`
-  margin: 0;
-  padding: 3px 0;
-`;
-
-export const ParagraphElement = ({
-  attributes,
-  children,
-}: RenderElementProps) => <Paragraph {...attributes}>{children}</Paragraph>;
diff --git a/packages/slate-plugins/src/elements/paragraph/components/index.ts b/packages/slate-plugins/src/elements/paragraph/components/index.ts
deleted file mode 100644
index 0128c67845..0000000000
--- a/packages/slate-plugins/src/elements/paragraph/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ParagraphElement';
diff --git a/packages/slate-plugins/src/elements/paragraph/renderElementParagraph.ts b/packages/slate-plugins/src/elements/paragraph/renderElementParagraph.ts
index a590bfa030..fa9d1b9736 100644
--- a/packages/slate-plugins/src/elements/paragraph/renderElementParagraph.ts
+++ b/packages/slate-plugins/src/elements/paragraph/renderElementParagraph.ts
@@ -1,8 +1,7 @@
-import { getRenderElement } from '../utils';
-import { ParagraphElement } from './components';
+import { getElement, getRenderElement } from '../utils';
 import { PARAGRAPH } from './types';
 
 export const renderElementParagraph = getRenderElement({
   type: PARAGRAPH,
-  component: ParagraphElement,
+  component: getElement('div'),
 });
diff --git a/packages/slate-plugins/src/elements/table/renderElementTable.tsx b/packages/slate-plugins/src/elements/table/renderElementTable.tsx
index 0c8080205d..e492229858 100644
--- a/packages/slate-plugins/src/elements/table/renderElementTable.tsx
+++ b/packages/slate-plugins/src/elements/table/renderElementTable.tsx
@@ -15,8 +15,8 @@ const Td = styled.td`
 `;
 
 const TableElement = ({ attributes, children }: RenderElementProps) => (
-  <StyledTable>
-    <tbody {...attributes}>{children}</tbody>
+  <StyledTable {...attributes} data-slate-type={TableType.TABLE}>
+    <tbody>{children}</tbody>
   </StyledTable>
 );
 
diff --git a/packages/slate-plugins/src/elements/utils/getElement.tsx b/packages/slate-plugins/src/elements/utils/getElement.tsx
index 8a62a53803..7ac0969def 100644
--- a/packages/slate-plugins/src/elements/utils/getElement.tsx
+++ b/packages/slate-plugins/src/elements/utils/getElement.tsx
@@ -6,5 +6,10 @@ import { RenderElementProps } from 'slate-react';
  */
 export const getElement = (Component: any) => ({
   attributes,
+  element,
   children,
-}: RenderElementProps) => <Component {...attributes}>{children}</Component>;
+}: RenderElementProps) => (
+  <Component {...attributes} data-slate-type={element.type}>
+    {children}
+  </Component>
+);
diff --git a/packages/slate-plugins/src/elements/utils/getRenderElement.tsx b/packages/slate-plugins/src/elements/utils/getRenderElement.tsx
index 00ecce38e6..5234f7e299 100644
--- a/packages/slate-plugins/src/elements/utils/getRenderElement.tsx
+++ b/packages/slate-plugins/src/elements/utils/getRenderElement.tsx
@@ -11,7 +11,8 @@ export const getRenderElement = ({
 }: GetRenderElementOptions) => ({
   component: Component = component,
 }: RenderElementOptions = {}) => (props: RenderElementProps) => {
-  if (props.element.type === type) {
+  const elementType = props.element.type;
+  if (elementType === type) {
     return <Component {...props} />;
   }
 };
diff --git a/packages/slate-plugins/src/elements/video/components/VideoElement.tsx b/packages/slate-plugins/src/elements/video/components/VideoElement.tsx
index 18fb88f42b..7d99c9bf02 100644
--- a/packages/slate-plugins/src/elements/video/components/VideoElement.tsx
+++ b/packages/slate-plugins/src/elements/video/components/VideoElement.tsx
@@ -7,6 +7,7 @@ import {
   useSelected,
 } from 'slate-react';
 import styled from 'styled-components';
+import { VIDEO } from '../types';
 
 interface Props {
   selected?: boolean;
@@ -60,7 +61,7 @@ export const VideoElement = ({
   const { url } = element;
 
   return (
-    <div {...attributes}>
+    <div {...attributes} data-slate-type={VIDEO}>
       <Wrapper selected={selected} focused={focused} contentEditable={false}>
         <VideoCell selected={selected} focused={focused} />
         <VideoWrapper>
diff --git a/packages/slate-plugins/src/search-highlight/components/ToolbarSearchHighlight.tsx b/packages/slate-plugins/src/search-highlight/components/ToolbarSearchHighlight.tsx
index 942b5ddbf6..18de0da9b0 100644
--- a/packages/slate-plugins/src/search-highlight/components/ToolbarSearchHighlight.tsx
+++ b/packages/slate-plugins/src/search-highlight/components/ToolbarSearchHighlight.tsx
@@ -13,8 +13,18 @@ const Wrapper = styled.div`
 `;
 
 const Input = styled.input`
-  padding-left: 2em;
+  box-sizing: border-box;
+  font-size: 0.85em;
   width: 100%;
+  padding: 0.5em;
+  padding-left: 2em;
+  border: 2px solid #ddd;
+  background: #fafafa;
+
+  :focus {
+    outline: 0;
+    border-color: blue;
+  }
 `;
 
 interface Props {
diff --git a/stories/config/globalStyle.ts b/stories/config/globalStyle.ts
index 2060da5389..f526fe1cf5 100644
--- a/stories/config/globalStyle.ts
+++ b/stories/config/globalStyle.ts
@@ -17,10 +17,6 @@ export const bodyStyles = css`
   .MuiSvgIcon-root {
     font-size: 18px !important;
   }
-
-  [data-slate-editor] > * {
-    line-height: 1.5em;
-  }
 `;
 
 export const GlobalStyle = createGlobalStyle`