Quotes for web (#494)

element-hq · Jan 18, 2023 · c6ef4e5 · c6ef4e5
1 parent c364b6e
commit c6ef4e5
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 0 deletions.
diff --git a/bindings/wysiwyg-wasm/src/lib.rs b/bindings/wysiwyg-wasm/src/lib.rs
@@ -203,6 +203,10 @@ impl ComposerModel {
  ComposerUpdate::from(self.inner.underline())
  }
 
+ pub fn quote(&mut self) -> ComposerUpdate {
+ ComposerUpdate::from(self.inner.quote())
+ }
+
  pub fn inline_code(&mut self) -> ComposerUpdate {
  ComposerUpdate::from(self.inner.inline_code())
  }

diff --git a/platforms/web/lib/composer.test.ts b/platforms/web/lib/composer.test.ts
@@ -28,6 +28,7 @@ const mockComposerModel = {
  inline_code: vi.fn(),
  ordered_list: vi.fn(),
  unordered_list: vi.fn(),
+ quote: vi.fn(),
  enter: vi.fn(),
 } as unknown as ComposerModel;
 
@@ -100,6 +101,10 @@ const testCases: testCase[] = [
  eventType: 'insertLineBreak',
  composerMethod: 'enter',
  },
+ {
+ eventType: 'insertQuote',
+ composerMethod: 'quote',
+ },
 ];
 
 describe('processInput', () => {

diff --git a/platforms/web/lib/composer.ts b/platforms/web/lib/composer.ts
@@ -90,6 +90,8 @@ export function processInput(
  return action(composerModel.undo(), 'undo');
  case 'insertCodeBlock':
  return action(composerModel.code_block(), 'code_block');
+ case 'insertQuote':
+ return action(composerModel.quote(), 'quote');
  case 'insertFromPaste':
  // Paste is already handled by catching the 'paste' event, which
  // results in a ClipboardEvent, handled above. Ideally, we would

diff --git a/platforms/web/lib/constants.ts b/platforms/web/lib/constants.ts
@@ -27,4 +27,5 @@ export const ACTION_TYPES = [
  'clear',
  'link',
  'codeBlock',
+ 'quote',
 ] as const;
diff --git a/platforms/web/lib/useFormattingFunctions.ts b/platforms/web/lib/useFormattingFunctions.ts
@@ -60,6 +60,7 @@ export function useFormattingFunctions(
  getLink: () =>
  composerModel?.get_link_action()?.edit_link?.link || '',
  codeBlock: () => sendEvent('insertCodeBlock'),
+ quote: () => sendEvent('insertQuote'),
  };
  }, [editorRef, composerModel]);
 

diff --git a/platforms/web/lib/useListeners/utils.test.ts b/platforms/web/lib/useListeners/utils.test.ts
@@ -35,6 +35,7 @@ describe('createDefaultActionStates', () => {
  unorderedList: 'enabled',
  link: 'enabled',
  codeBlock: 'enabled',
+ quote: 'enabled',
  });
  });
 });

diff --git a/platforms/web/src/App.tsx b/platforms/web/src/App.tsx
@@ -27,6 +27,7 @@ import listUnorderedImage from './images/list_unordered.svg';
 import listOrderedImage from './images/list_ordered.svg';
 import inlineCodeImage from './images/inline_code.svg';
 import codeBlockImage from './images/code_block.svg';
+import quoteImage from './images/quote.svg';
 import { Wysiwyg, WysiwygEvent } from '../lib/types';
 
 type ButtonProps = {
@@ -142,6 +143,12 @@ function App() {
  imagePath={listOrderedImage}
  state={actionStates.orderedList}
  />
+ <Button
+ onClick={wysiwyg.quote}
+ alt="quote"
+ imagePath={quoteImage}
+ state={actionStates.quote}
+ />
  <Button
  onClick={wysiwyg.inlineCode}
  alt="inline code"

diff --git a/platforms/web/src/images/quote.svg b/platforms/web/src/images/quote.svg