Add Android app code #5

jkmassel · 2024-07-16T23:31:25Z

Adds a basic Android app for testing

* build: Add prettier * build: Add @wordpress/prettier-config Align code formatting with the Gutenberg project. * style: Format code with `@wordpress/prettier-config` Align with the Gutenberg project to mitigate style conflicts.

geriux

Thank you for working on adding the Android Demo app!

I noticed that the WebView's height doesn't adapt when the keyboard is opened causing the Toolbar to not be visible, as well as when you add content or add new paragraphs, the content gets hidden under the keyboard.

I tested two different simulators to verify it wasn't something specific to a device's config. Can you replicate this issue?

geriux · 2024-08-21T07:20:29Z

ReactApp/package.json

 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",


Nice! I like having the host arg as the default.

Sources/GutenbergKit/Gutenberg/assets/index.css

geriux · 2024-08-21T08:01:53Z

ReactApp/src/misc/Helpers.js

-		const value = { message: message, body: parameters };
-		window.webkit.messageHandlers.editorDelegate.postMessage(value);
+export function editorLoaded() {
+	console.log("Firing JS editorLoaded event");


If this was just for testing, could we remove it?

geriux · 2024-08-21T08:10:38Z

ReactApp/src/misc/Helpers.js

+	console.log("Firing JS editorLoaded event");
+
+	if(window.editorDelegate) {
+		editorDelegate.onEditorLoaded();


Although by itself editorDelegate exists, to prevent ESLint formatting warnings, could we update this to:

Suggested change

editorDelegate.onEditorLoaded();

window.editorDelegate.onEditorLoaded();

geriux · 2024-08-21T08:12:20Z

ReactApp/src/misc/Helpers.js

+
+export function onBlocksChanged(isEmpty = false) {
+	if(window.editorDelegate) {
+		editorDelegate.onBlocksChanged(isEmpty);


Although by itself editorDelegate exists, to prevent ESLint formatting warnings, could we update this to:

Suggested change

editorDelegate.onBlocksChanged(isEmpty);

window.editorDelegate.onBlocksChanged(isEmpty);

geriux · 2024-08-21T08:12:42Z

ReactApp/src/misc/Helpers.js

+
+export function showBlockPicker() {
+	if(window.editorDelegate) {
+		editorDelegate.showBlockPicker();


Same as above:

Suggested change

editorDelegate.showBlockPicker();

window.editorDelegate.showBlockPicker();

geriux · 2024-08-21T08:16:32Z

ReactApp/src/misc/Helpers.js

I noticed some formatting warnings when opening this file. I usually set Visual Studio Code to apply formatting fixes when I save changes, but we could also do npm run format.

Can we please fix the formatting warnings before merging these changes? Thanks!

dcalhoun

Thanks for completing this. Very helpful. 👍🏻 The Android demo app worked for me.

I left a few suggestions, but feel free to disregard them as items we could complete later.

As @geriux mentioned, I recommend we format the JavaScript (npm run format) before merging. Eventually, we'll set up a linter to avoid needing to discuss that particular subject during code review.

dcalhoun · 2024-08-21T12:53:55Z

Demo-Android/app/src/main/java/com/example/gutenbergkit/GutenbergView.kt

+        // Production mode – load the assets from the app bundle – you'll need to copy
+        // this value out of the `dist` directory after building GutenbergKit
+        this.loadUrl("file:///android_asset/index.html")
+
+        // Dev mode – you can connect the app to a local dev server and have it refresh as
+        // changes are made. To start the server, run `make dev-server` in the project root
+        // directory.
+        //
+        // You'll need to set this to the IP address of your local machine
+        //
+        // this.loadUrl("http://192.168.5.248:5173/")


Long term, I suppose we might mirror iOS' setup where a GUTENBERG_EDITOR_URL environment variable toggles dev mode and sets the IP and port. I don't feel like we have to address this before merging.

dcalhoun · 2024-08-21T12:58:14Z

Demo-Android/app/src/main/java/com/example/gutenbergkit/GutenbergView.kt

+        // Production mode – load the assets from the app bundle – you'll need to copy
+        // this value out of the `dist` directory after building GutenbergKit


Is this comment still true now that a Makefile exists that copies the built assets?

dcalhoun · 2024-08-21T12:59:13Z

Demo-iOS/Sources/ContentView.swift

    var body: some View {
        NavigationView {
-            EditorView()
+            EditorView(editorURL: URL(string: "http://localhost:5173/")!)


Should this rely upon the GUTENBERG_EDITOR_URL environment variable instead?

Yeah, probably – this could use a bigger refactor anyway so I'm comfortable leaving it for a future change

ReactApp/src/components/EditorToolbar.jsx

ReactApp/src/misc/Helpers.js

Sources/GutenbergKit/Gutenberg/assets/index.css

Sources/GutenbergKit/Sources/GBWebView.swift

jkmassel · 2024-08-21T18:43:08Z

I think I've addressed most of the feedback – there are some other forthcoming PRs that'll add an Android module and some other stuff so some of the more structural stuff should probably be addressed there.

ReactApp/src/components/Editor.jsx

Co-authored-by: David Calhoun <github@davidcalhoun.me>

dcalhoun

Latest changes work well for me on Android and iOS. 🚀 Thank you!

dcalhoun force-pushed the main branch from fad1bdb to f150158 Compare August 5, 2024 15:31

jkmassel requested review from dcalhoun and geriux August 20, 2024 15:46

dcalhoun and others added 4 commits August 20, 2024 10:17

style: Format with Prettier (#3)

567ce96

* build: Add prettier * build: Add @wordpress/prettier-config Align code formatting with the Gutenberg project. * style: Format code with `@wordpress/prettier-config` Align with the Gutenberg project to mitigate style conflicts.

Add Android app code

02e9d69

Re-arrange the projects

20e8be2

Fix iOS issue

1d53e89

jkmassel force-pushed the add/android branch from b57779b to 1d53e89 Compare August 20, 2024 16:18

jkmassel added 10 commits August 20, 2024 10:53

Use a Makefile instead of Scripts

fb964ca

Don’t store build products in the repo

64ff83f

Ignore Android tooling directories

34db643

Fix a deprecation warning on Android

24beb10

Fix iOS code signing

ff4ba1d

Remove duplicate file

e85c400

Add macOS support

f1f2e94

Remove the input accessory view on iOS

4f4b577

Update README for makefile

42d6549

Some more references

a495d17

geriux reviewed Aug 21, 2024

View reviewed changes

dcalhoun reviewed Aug 21, 2024

View reviewed changes

jkmassel added 5 commits August 21, 2024 12:24

Add fmt

e3ccfe2

Avoid lint warnings

b3870d1

Remove debug log

3b1d64f

Remove index.html

c8d774a

Fix some lint issues

02fad4d

jkmassel requested review from dcalhoun and geriux August 21, 2024 18:43

jkmassel enabled auto-merge (squash) August 21, 2024 18:51

Style fixes

431940e

jkmassel force-pushed the add/android branch from 4333796 to 431940e Compare August 21, 2024 18:56

dcalhoun reviewed Aug 21, 2024

View reviewed changes

ReactApp/src/components/Editor.jsx Outdated Show resolved Hide resolved

Update ReactApp/src/components/Editor.jsx

81cd51a

Co-authored-by: David Calhoun <github@davidcalhoun.me>

jkmassel requested a review from dcalhoun August 21, 2024 19:29

dcalhoun approved these changes Aug 21, 2024

View reviewed changes

jkmassel merged commit 0c3e5f1 into trunk Aug 21, 2024

jkmassel deleted the add/android branch August 21, 2024 19:44

	editorDelegate.onEditorLoaded();
	window.editorDelegate.onEditorLoaded();

	editorDelegate.onBlocksChanged(isEmpty);
	window.editorDelegate.onBlocksChanged(isEmpty);

	editorDelegate.showBlockPicker();
	window.editorDelegate.showBlockPicker();

		// Production mode – load the assets from the app bundle – you'll need to copy
		// this value out of the `dist` directory after building GutenbergKit

Add Android app code #5

Add Android app code #5

Uh oh!

Conversation

jkmassel commented Jul 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

geriux left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcalhoun left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jkmassel commented Aug 21, 2024

Uh oh!

Uh oh!

dcalhoun left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jkmassel commented Jul 16, 2024 •

edited

Loading