Answers Tiny MCE tutorial #1

tiny-ben-tran · 2022-01-13T01:49:34Z

No description provided.

lnewson

Really nice work on this Ben! 🏆

I've largely just left a few style comments to help when you get around to making changes elsewhere, there were 2 things that if you have time though it'd be good to have another look at.

lnewson · 2022-01-13T06:27:21Z

src/main/html/Part1Ex1.html

+  tinymce.init({ selector: '#editor2' });
+  tinymce.init({ selector: '#editor3' });


This could just be simplified to this for what it's worth 🤷

Suggested change

tinymce.init({ selector: '#editor2' });

tinymce.init({ selector: '#editor3' });

tinymce.init({ selector: '.editorSet' });

lnewson · 2022-01-13T06:28:24Z

src/main/ts/Part2Ex1.ts

@@ -16,6 +16,10 @@ Let's model the x,y of the top-left and bottom-right corners.
 */
 export interface Boundz {
  // TODO: add fields: x1, y1, x2, y2
+  x1: number;


For this it's fine, but just as a heads up you'll see we normally mark most properties readonly since that helps to ensure we're not mutating data.

lnewson · 2022-01-13T06:30:02Z

src/main/ts/Part2Ex2ArrayFunctions.ts

@@ -41,6 +41,7 @@ export const myFrogs: Frog[] = [

 export const runEach2 = (): void => {
  // TODO: Use Arr.each and console.log to print the name of each frog
+  Arr.each(myFrogs, (f: Frog) => console.log(f.name))


Suggested change

Arr.each(myFrogs, (f: Frog) => console.log(f.name))

Arr.each(myFrogs, (f) => console.log(f.name))

You don't need to declare the type here as it'll be inferred. We normally try to avoid re-declaring redundant types as if you have to change it later it just makes more work 🤷

lnewson · 2022-01-13T06:31:24Z

src/main/ts/Part2Ex2ArrayFunctions.ts

@@ -83,12 +83,10 @@ export const evens = (xs: number[]): number[] =>

 // TODO: Write a function that returns all the frogs that ribbit
 // TODO: Run the provided test to check your answer.
-export const ribbitting = (frogs: Frog[]): Frog[] =>
-  [];
+export const ribbitting = (frogs: Frog[]): Frog[] => Arr.filter(frogs, (f: Frog) => f.ribbits === true)


Suggested change

export const ribbitting = (frogs: Frog[]): Frog[] => Arr.filter(frogs, (f: Frog) => f.ribbits === true)

export const ribbitting = (frogs: Frog[]): Frog[] => Arr.filter(frogs, (f: Frog) => f.ribbits)

The === true here is redundant since it's a non-optional boolean, so we're normally just do something like the above instead.

lnewson · 2022-01-13T06:33:33Z

src/main/ts/Part2Ex3Optional.ts

@@ -1,4 +1,5 @@
 import { Optional } from '@ephox/katamari';
+import { search } from '@ephox/sugar/lib/main/ts/ephox/sugar/api/dom/Focus';


Something went wrong with an auto import here I'm guessing... you'll find you'll get a lint error in any of our regular code for this fwiw. We also prefer used named imports as it makes the code more readable, e.g:

import { Focus } from `@ephox/katamari';`

lnewson · 2022-01-13T06:53:46Z

src/main/ts/Part2Ex4FP.ts

 const switchMode = (m: Mode): void => {
+  const valid = hasMode(m);


This doesn't really do anything meaningful unless you're accepting content from outside of TypeScript, as you can't pass a mode that isn't defined in the Mode type and if you're checking this it's somewhat defeating the point of using types. That said, you've still made a pure function here so its fine as that was the point of this exercise.

lnewson · 2022-01-13T06:56:28Z

src/main/ts/Part2Ex4FP.ts


 // TODO: Write a function that takes an array of numbers and replaces each value with 9.
+export const replaceElementWith9 = (items: number[]) => Optional.from(items).fold(Fun.constant([]), (items) => items.map(Fun.constant(9)));


This is overly complicated, as again items shouldn't be nullable so you don't need the Optional.from logic here. Additionally as a heads up we generally avoid the native Array.map function and instead use the helper functions defined in Arr. So instead this could have been something like this:

Suggested change

export const replaceElementWith9 = (items: number[]) => Optional.from(items).fold(Fun.constant([]), (items) => items.map(Fun.constant(9)));

export const replaceElementWith9 = (items: number[]) => Arr.map(items, Fun.constant(9));

lnewson · 2022-01-13T07:04:50Z

src/test/ts/part2/Exercise3OptionTest.ts

@@ -1,5 +1,7 @@
 import { describe, it } from '@ephox/bedrock-client';
-import { assert } from 'chai';
+import { Optional } from '@ephox/katamari';
+import { createElement } from '@ephox/sugar/lib/main/ts/ephox/sugar/api/node/SugarShadowDom';


Another case where we should be imported the named export instead:

Suggested change

import { createElement } from '@ephox/sugar/lib/main/ts/ephox/sugar/api/node/SugarShadowDom';

import { SugarShadowDom } from '@ephox/sugar';

lnewson · 2022-01-13T07:05:21Z

src/test/ts/part2/Exercise4FPTest.ts

+import * as Ex from '../../../main/ts/Part2Ex4FP';
+
+describe('Exercise 4 FP', () => {
+    it('map identity over array', () => {


Slight style issue here by the looks, as this should be using 2 spaces not 4.

lnewson · 2022-01-13T07:07:20Z

src/test/ts/part3/Part3Ex2Test.ts

@@ -112,5 +114,6 @@ describe('Part3Ex3Test', () => {
    ].join('\n'));

    // TODO: Write an assertion to test your changes (hint: TinyAssertions)
+    TinyAssertions.assertContentPresence(editor, {span: 1});


This doesn't check the content has been underlined, so it's not a very reliable test as it could just be a span without any styles. Can you take another shot at this please?

tiny-ben-tran · 2022-01-14T03:20:07Z

@lnewson , can you please give this another review? It can wait till next week since today is Friday

lnewson

The fixes looks good thanks Ben 👍

tiny-ben-tran added 7 commits January 13, 2022 12:15

Answers for a lot of questions

27ebeb5

Added additional tests

0e1cb5a

Added answer to part2ex5sugar

93fa4fd

Fixed import

2553e7a

Added answer for part3ex1test

9e580b9

Completed part3ex2test

08ac634

Use single quote and updated exercise3optiontest

72f924f

lnewson reviewed Jan 13, 2022

View reviewed changes

tiny-ben-tran added 3 commits January 14, 2022 09:06

Fixed according to feedbacks

8cd6478

Second attempt at getProtocol

e35d46a

Second attempt on part3Ex2Test

db0c9a2

lnewson approved these changes Jan 17, 2022

View reviewed changes

tiny-ben-tran added 10 commits January 17, 2022 13:42

Added all toolbar options and default font to 14pt

6bb06d3

Added custom button

cf91310

Insert into editor

0a14b66

context tool bar using the existing buttons

e55e9ee

Added custom context button to strike red

1cbef4a

Gather content of all editors

a99e5ed

Use autoresize plugin and set max height of content

5bb6e34

Apply style using inbuilt formatter

a4d9f6d

Use formatter to apply style

f6a9605

Replaced decprecated methods

873894a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Answers Tiny MCE tutorial #1

Answers Tiny MCE tutorial #1

tiny-ben-tran commented Jan 13, 2022

lnewson left a comment

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

lnewson Jan 13, 2022

tiny-ben-tran commented Jan 14, 2022

lnewson left a comment

		tinymce.init({ selector: '#editor2' });
		tinymce.init({ selector: '#editor3' });

	tinymce.init({ selector: '#editor2' });
	tinymce.init({ selector: '#editor3' });
	tinymce.init({ selector: '.editorSet' });

	Arr.each(myFrogs, (f: Frog) => console.log(f.name))
	Arr.each(myFrogs, (f) => console.log(f.name))

	export const ribbitting = (frogs: Frog[]): Frog[] => Arr.filter(frogs, (f: Frog) => f.ribbits === true)
	export const ribbitting = (frogs: Frog[]): Frog[] => Arr.filter(frogs, (f: Frog) => f.ribbits)

		@@ -1,4 +1,5 @@
		import { Optional } from '@ephox/katamari';
		import { search } from '@ephox/sugar/lib/main/ts/ephox/sugar/api/dom/Focus';

		const switchMode = (m: Mode): void => {
		const valid = hasMode(m);


		// TODO: Write a function that takes an array of numbers and replaces each value with 9.
		export const replaceElementWith9 = (items: number[]) => Optional.from(items).fold(Fun.constant([]), (items) => items.map(Fun.constant(9)));

	import { createElement } from '@ephox/sugar/lib/main/ts/ephox/sugar/api/node/SugarShadowDom';
	import { SugarShadowDom } from '@ephox/sugar';

Answers Tiny MCE tutorial #1

Are you sure you want to change the base?

Answers Tiny MCE tutorial #1

Conversation

tiny-ben-tran commented Jan 13, 2022

lnewson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tiny-ben-tran commented Jan 14, 2022

lnewson left a comment

Choose a reason for hiding this comment